这篇文章主要介绍“如何理解javascript事件委托”，在日常操作中，相信很多人在如何理解javascript事件委托问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何理解javascript事件委托”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
在javascript中，事件委托也称为事件托管或事件代理，就是把目标节点的事件绑定到祖先节点上；它是利用事件冒泡原理，管理某一类型的所有事件，利用父元素来代表子元素的某一类型事件的处理方式。
本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。
在 JavaScript 中，事件委托（delegate）也称为事件托管或事件代理，是利用事件冒泡原理，管理某一类型的所有事件，利用父元素来代表子元素的某一类型事件的处理方式。
这样做的好处：优化代码，提升运行性能，真正把 HTML 和 JavaScript 分离，也能防止出现在动态添加或删除节点过程中注册的事件丢失的现象。
示例1
下面示例使用一般方法为列表结构中每个列表项目绑定 click 事件，单击列表项目，将弹出提示对话框，提示当前节点包含的文本信息。但是，当我们为列表框动态添加列表项目之后，新添加的列表项目没有绑定 click 事件，这与我们的愿望相反。
<button id="btn">添加列表项目</button>
<ul id="list">
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
</ul>
<script>
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i ++) {
lis[i].addEventListener('cluick', function (e) {
var e = e || window.event;
var target = e.target || e.srcElement;
alert(e.target.innerHTML);
}, false);
}
var i = 4;
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
var li = document.createElement("li");
li.innerHTML = "项目列表" + i++;
ul.appendChild(li);
});
</script>示例2
下面示例借助事件委托技巧，利用事件传播机制，在列表框 ul 元素上绑定 click 事件，当事件传播到父节点 ul 上时，捕获 click 事件，然后在事件处理函数中检测当前事件响应节点类型，如果是 li 元素，则进一步执行下面代码，否则跳出事件处理函数，结束响应。
<button id="btn">添加项目列表</button>
<ul id="list">
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
</ul>
<script>
var ul = document.getElementById("list");
ul.addEventListener('click', function(e) {
var e = e || window.event;
var target = e.target || e.srcElement;
if (e.target && e.target.nodeName.toUpperCase()=="LI") {
alert(e.target.innerHTML);
}
}, false);
var i = 4;
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
var li = document.createElement("li");
li.innerHTML = "项目列表" + i++;
ul.appendChild(li);
});
</script>当页面存在大量元素并且每个元素注册了一个或多个事件时，可能会影响性能。访问和修改更过的 DOM 节点时，程序就会更慢；特别是事件连接过程都发生在 load（或 DOMContentReady）事件中时，对任何一个富交互网页来说，这都是一个繁忙的时间段。另外，浏览器需要保存每个事件句柄的记录，也会占用更多内存。
到此，关于“如何理解javascript事件委托”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
