什么是事件代理？DOM2.0标准事件模型的三个阶段

Posted 2020-10-12

体验更优排版请移步原文：http://vblog.win/blogs/programming/js-event-delegation.html

 

事件代理，又称事件委托（Delegation），就是将处理事件委派到父元素或者顶级元素上，利用事件的冒泡机制，管理某一类型元素上的所有事件。

要理解这个概念，必须先对事件模型有个初步的了解。W3C定义的DOM2.0标准事件模型分为三个阶段：

1. 捕获阶段
2. 目标阶段
3. 冒泡阶段

捕获阶段：当某个元素触发事件时，顶层对象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，优化效果可想而知。

以上只是对事件代理的基本认识和应用，更深层次应用有待挖掘。