概述
事件委托，也叫事件代理，从JavaScript高级程序设计上讲：：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那么这有事什么意思呢？下面来看一下网上普遍流传的一个例子：取快递。
有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。
从这个例子我们可以总结出两点：
- 现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；
- 新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也有事件。
事件委托的优点
在说优点之前，我们先来看一个问题。如果我们需要给页面上的dom添加事件。我们会怎么想办？一般情况下，我们一般会直接设事件。但是当dom很多时该怎么办呢？比如说有100个li需要添加点击事件。
首先我们当然不可能一个一个手动添加事件，所以我们一般情况下会选择通过for循环来给每一个li设事件。
那么问题就来了，首先100个事件函数就存在100个内存空间。显而易见，这100个内存空间极大的浪费了浏览器的内存，严重影响我们的性能；而使用事件委托，我们只需要对这些li的父级这一个对象进行操作即可，内存空间这时候也就只有一个，性能自然也上去了；
然后在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，相比于给每个li添加事件；使用事件委托极大的减少了事件的数量，这样就能大大的减少与dom的交互次数，提高性能。
事件委托的原理
事件委托是利用事件的冒泡原理来实现的。所谓事件冒泡，就是事件从最深的节点开始，然后逐步向上传播事件。例如存在节点树：div>ul>li>p>a，如果我们给最里面的a添加click事件，当我们点击a时，事件会一层一层往外执行，直到最外层。既然点击内部盒子会冒泡到最外层，那么我么大可以利用最外层来代理执行其内部的事件。
代码实现
为了做出区别，我们可以比较一下使用一般方法和使用事件委托。
- 子节点实现相同功能
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
实现功能是点击li，弹出文本内容：
//一般方法
window.onload = function(){
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i].onclick = function(){
alert(this.innerText);
}
}
}
//事件委托
window.onload = function(){
var oUl = document.getElementById("ul1");
oUl.onclick = function(){
alert(this.innerText);
}
}
但是这时候用事件委托会有一点小问题。如果oUl里面有别的元素，被点击也会触发事件。那怎么办呢？不用担心。
Event对象提供了一个属性叫target，可以返回事件的目标节点，我们称之为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，在使用是我们为了阅读方便，可以转换成小写。
window.onload = function(){
var oUl = document.getElementById("ul1");
oUl.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
alert(target.innerText);
}
}
}
- 添加节点
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
还是这个节点树，但是这次我们的需求是：移入li，li变红，移出li，li变白，然后点击按钮，可以向ul中添加一个li子节点。
//一般方法
window.onload = function(){
var oBtn = document.getElementById("btn");
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName('li');
var num = 4;
function mHover () {
//鼠标移入变红，移出变白
for(var i=0; i<aLi.length;i++){
aLi[i].onmouseover = function(){
this.style.background = 'red';
};
aLi[i].onmouseout = function(){
this.style.background = '#fff';
}
}
}
mHover ();
//添加新节点
oBtn.onclick = function(){
num++;
var oLi = document.createElement('li');
oLi.innerHTML = 111*num;
oUl.appendChild(oLi);
mHover ();
};
}
//事件委托
window.onload = function(){
var oBtn = document.getElementById("btn");
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName('li');
var num = 4;
//事件委托，添加的子元素也有事件
oUl.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = "red";
}
};
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = "#fff";
}
};
//添加新节点
oBtn.onclick = function(){
num++;
var oLi = document.createElement('li');
oLi.innerHTML = 111*num;
oUl.appendChild(oLi);
};
}
对比两种方法，事件委托增加的节点直接获取到原有的事件，不用额外进行操作；而传统方法，增加的节点本身没有事件，需要我们后期手动再为他添加节点，这无疑增加了工作量，而且使代码更为复杂。
参考资料：js中的事件委托或是事件代理详解
网友评论