标签：需要 就是 阶段 window 目标 block dom 元素 class
体验更优排版请移步原文：http://vblog.win/blogs/programming/js-event-delegation.html
事件代理，又称事件委托（Delegation），就是将处理事件委派到父元素或者顶级元素上，利用事件的冒泡机制，管理某一类型元素上的所有事件。
要理解这个概念，必须先对事件模型有个初步的了解。W3C定义的DOM2.0标准事件模型分为三个阶段：
- 捕获阶段
- 目标阶段
- 冒泡阶段
捕获阶段：当某个元素触发事件时，顶层对象document会发出一个事件流，随着DOM树向着目标元素流去直到到达目标元素，途径的元素如果绑定了事件，在这个阶段是不会执行的；
目标阶段：事件流找到了目标元素，执行目标元素相应的处理函数，如果没有绑定任何事件，则不执行；
冒泡阶段：事件流从目标元素向顶层元素折回，遇到绑定事件，即执行（该阶段在IE6中不存在）；
因此我们发现，在元素绑定事件时，完全可以绑定在该元素的任一上级元素上再进行事件处理即可。那么，事件代理具体怎么应用呢？
例如，页面中有这样一个无序列表，需要给每个li添加点击事件，弹出相应内容，如果我们通过for循环为每个li单独绑定click事件，由于元素数量过多无疑会造成网页性能下降，有内存泄露的风险。
|
1
2
3
4
5
6
7
8
|
<ul id="ul-test">
<li id="li-1">11</li>
<li id="li-2">22</li>
<li id="li-3">33</li>
<li id="li-4">44</li>
<li id="li-5">55</li>
</ul>
|
如果将click事件绑定在ul元素上，
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
window.onload = function(){
var ulEle = document.getElementById("ul-test");
ulEle.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == ‘li‘){
alert(target.innerHTML);
if(target.id == ‘li-3‘){
alert(‘click li-3‘);
}
}
}
}
|
上述代码中，我们只需要绑定一次事件，通过Event对象的target属性返回事件源（即事件的目标节点），可以做不同的处理，这就是事件代理，原本需要目标元素处理的事件，交由其父元素代为执行。采用事件代理避免了频繁的操作DOM，优化效果可想而知。
以上只是对事件代理的基本认识和应用，更深层次应用有待挖掘。
标签：需要 就是 阶段 window 目标 block dom 元素 class
原文地址：http://www.cnblogs.com/kaidarwang/p/7764338.html
