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

Created at 2017-10-29 Category programming Tag JavaScript times read

事件代理,又称事件委托(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,优化效果可想而知。

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

Table of Content

© 冷泉 Since 2017 - 2018

Total times visits. visitors.

Kwin's Blog | 个人网站