概述：
什么叫事件委托？（它还有一个名字叫事件代理）
JavaScript高级程序设计上讲：
事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
讲事件委托基本都用了同一例子，取快递：
有三个同事预计在周一收到快递。为了签收快递，有两种办法：
一是三个人在公司门口等快递；二是委托给前台代为签收。
现实中，我们大都采用委托的方案：前台收到快递后，她会判断收件人是谁，然后按照收件人的要求签收。
这种方案还有一个优势，就是即使公司里来了新员工(不管多少)，前台MM也会在收到新员工的快递后代为签收。
这里有2层意思：
一，程序中 现有 的dom节点是有事件的
二，程序中 新添加 的dom节点也是有事件的
为什么要用事件委托：
一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，
那如果是很多的dom需要添加事件处理呢？比如有1000个li，每个li都有click点击事件，
可能我们会用for循环的方法，来遍历所有的li，给它们添加事件，但这么做会存在什么影响呢？
在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，
因为，不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，
就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果用事件委托，就会将所有的操作放到js里面，与dom的操作就只需要交互一次，
这样就能大大的减少与dom的交互次数，提高性能；
每个函数都是一个对象，对象会占用内存，对象越多，内存占用率就越大，自然性能就越差了
比如上面的1000个li，就要占用1000个内存空间，如果是10000个呢，那只能说呵呵了，
如果用事件委托，那么就可以只对它的父级（如果只有一个父级）这一个对象进行操作，
这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。
事件委托的原理：
事件委托是利用事件冒泡原理来实现的，
何为事件冒泡呢？
就是事件从最深的节点开始，逐步向上传播事件
举个例子：页面上有这么一个节点树，div>ul>li>a;
比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序为a>li>ul>div，
有这样的机制，那么我们给最外面的div加点击事件，里面的ul，li，a触发点击事件的时候，
都会冒泡到最外层的div上，所以里面的和外面的点击事件都会触发。
而事件委托，就是委托它们父级代为执行事件。
事件委托实现：
在介绍事件委托的方法之前，我们先来看一段 一般方法的例子：
// html
<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(123);
}
}
}
我们看dom操作，首先找ul，遍历li，然后点击li时，又找一次目标li，执行操作，每次点击都要找一次li；
下面用事件委托的方法：
// 事件委托
window.onload = function(){
var oUl = document.getElementById("ul1");
oUl.onclick = function(){
alert(123);
}
}
用父级ul做事件处理，当li被点击时，由于冒泡，事件冒泡到ul上，因ul有点击事件，所以事件触发。
当然，这里点击ul时，也会触发事件。
那么，如果想让事件代理的效果跟直接给节点的事件效果一样怎么办？
比如只有点击li才会触发，这里就要用到事件对象的一个属性，target：
Event对象提供了一个属性叫target，它返回事件的目标节点，我们称为事件源。
也就是说，target可以表示为当前的事件操作的dom。
这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement*
此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较 代码如下：
// 使用target属性 避免点击代理元素时会触发事件的情况
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(123);
alert(target.innerHTML);
}
}
}
这样就只有点击li会触发事件了，且每次只执行一次dom操作，如果li数量很多的话，将大大减少dom的操作。
上面的例子是说li操作的是同样的效果，要是每个li被点击的效果都不一样，该如何去写呢？
一般方法的例子：
// html
<div id="box">
<input type="button" id="add" value="添加" />
<input type="button" id="remove" value="删除" />
<input type="button" id="move" value="移动" />
<input type="button" id="select" value="选择" />
</div>
window.onload = function(){
var Add = document.getElementById("add");
var Remove = document.getElementById("remove");
var Move = document.getElementById("move");
var Select = document.getElementById("select");
Add.onclick = function(){
alert('添加');
};
Remove.onclick = function(){
alert('删除');
};
Move.onclick = function(){
alert('移动');
};
Select.onclick = function(){
alert('选择');
}
}
上面实现的效果就不多说了，4个按钮，点击每一个做不同的操作，至少需要4次dom操作。
用事件委托进行优化：
window.onload = function(){
var oBox = document.getElementById("box");
oBox.onclick = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLocaleLowerCase() == 'input'){
switch(target.id){
case 'add' :
alert('添加');
break;
case 'remove' :
alert('删除');
break;
case 'move' :
alert('移动');
break;
case 'select' :
alert('选择');
break;
}
}
}
}
用事件委托就可以只用一次dom操作就能完成所有的效果
现在讲的都是document加载完成的现有dom节点下的操作，那么如果是新增的节点，新增的节点会有事件吗？也就是说，一个新员工来了，他能收到快递吗？
看一下正常的添加节点的方法：
<input type="button" name="" id="btn" value="添加" />
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
window.onload = function(){
var oBtn = document.getElementById("btn");
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName('li');
var num = 4;
//鼠标移入变红，移出变白
for(var i=0; i<aLi.length;i++){
aLi[i].onmouseover = function(){
this.style.background = 'red';
};
aLi[i].onmouseout = function(){
this.style.background = '#fff';
}
}
//添加新节点
oBtn.onclick = function(){
num++;
var oLi = document.createElement('li');
oLi.innerHTML = 111*num;
oUl.appendChild(oLi);
};
}
鼠标移入li，li变红，移出li，li变白，点击按钮，向ul中添加一个li子节点
这是一般的做法，但是你会发现，新增的li是没有事件的，说明添加子节点的时候，事件没有一起添加进去，这不是我们想要的结果，那怎么做呢？
一般的解决方案会是这样，将for循环用一个函数包起来，命名为mHover，如下：
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 ();
};
}
虽然功能实现了，看着还挺好，但实际上无疑是又增加了一个dom操作，在优化性能方面是不可取的。
那么事件委托的方式该如何去写？
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里面的执行，这样可以大大的减少dom操作，这才是事件委托的精髓所在。
问题扩展：
问题是：
现在给一个场景 ul > li > div > p，
div占满li，p占满div，还是给ul绑定时间，需要判断点击的是不是li（假设li里面的结构是不固定的），
那么e.target就可能是p，也有可能是div，这种情况怎么处理呢？
再现一下场景
<ul id="test">
<li>
<p>11111111111</p>
</li>
<li>
<div>
22222222
</div>
</li>
<li>
<span>3333333333</span>
</li>
<li>4444444</li>
</ul>
如上列表，有4个li，里面的内容各不相同，点击li，event对象肯定是当前点击的对象，怎么指定到li上。
解决方案：
var oUl = document.getElementById('test');
oUl.addEventListener('click',function(ev){
var target = ev.target;
while(target !== oUl ){
if(target.tagName.toLowerCase() == 'li'){
console.log('li click~');
break;
}
target = target.parentNode;
}
})
核心代码是while循环部分，实际上就是一个递归调用。
你也可以写成一个函数，用递归的方法来调用。
同时用到冒泡原理，从里往外冒泡，直到currentTarget为止，
当前的target是li的时候，执行对应的事件，然后终止循环。
总结：
什么样的事件可以用事件委托，什么样的事件不可以用？
适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
值得注意的是，mouseover和mouseout虽然也有事件冒泡，
但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易。
不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，
以及focus，blur之类的，它们本身没有冒泡的特性，所以就不能用事件委托了。
扫一扫
998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
