JavaScript事件代理和委托

22

在JavaScript中,经常会碰到要监听列表中多项li的情形,假设我们有一个列表如下:


<ul id="list">
  <li id="item1">item1</li>
  <li id="item2">item2</li>
  <li id="item3">item3</li>
  <li id="item4">item4</li>
</ul>

如果我们要实现以下功能:当鼠标点击某一li时,alert输出该li的内容,我们通常的写法是这样的:

  • 当列表项比较少时,直接给每个li添加onclick事件
  • 列表项比较多时,在onload时就给每个列表项调用监听

第一种方法比较简单直接,但是没有顾及到html与JavaScript的分离,不建议使用,第二种方法的代码如下:


window.onload=function(){
  var ulNode=document.getElementById("list");
  var liNodes=ulNode.childNodes||ulNode.children;
  for(var i=0;i<liNodes.length;i++){
    liNodes[i].addEventListener('click',function(e){
      alert(e.target.innerHTML);
    },false);
  }
}

由上可以看出来,假如不停的删除或添加li,则function()也要不停的更改操作,易出错,因此推荐使用事件代理,在使用事件代理之前,我们先来了解一下事件阶段(event phase):

事件阶段:

当一个DOM事件被触发的时候,他并不是只在它的起源对象上触发一次,而是会经历三个不同的阶段。简而言之:事件一开始从文档的根节点流向目标对象(捕获阶段),然后在目标对向上被触发(目标阶段),之后再回溯到文档的根节点(冒泡阶段)如图所示(图片来自W3C):

事件捕获阶段(Capture Phase)

事件的第一个阶段是捕获阶段。事件从文档的根节点出发,随着DOM树的结构向事件的目标节点流去。途中经过各个层次的DOM节点,并在各节点上触发捕获事件,直到到达时间的目标节点。捕获阶段的主要任务是简历传播路径,在冒泡阶段,时间会通过这个路径回溯到文档根节点。


element.removeEventListener(&ltevent-name>, <callback>, <use-capture>);

我们通过上面的这个函数来给节点设置监听,可以通过将;设置成true来为事件的捕获阶段添加监听回调函数。在实际应用中,我们并没有太多使用捕获阶段监听的用例,但是通过在捕获阶段对事件的处理,我们可以阻止类似click事件在某个特定元素上被触发。


var form=document.querySeletor('form');
form.addEventListener('click',function(e){
  e.stopPropagation();
  },true);

如果你对这种用法不是很了解的话,最好还是将设置为false或者undefined,从而在冒泡阶段对事件进行监听。

目标阶段(Target Phase)

当事件到达目标节点时,事件就进入了目标阶段。事件在目标节点上被触发,然后逆向回流,知道传播到最外层的文档节点。

对于多层嵌套的节点,鼠标和指针事件经常会被定位到最里层的元素上。假设,你在一个div元素上设置了click的监听函数,而用户点击在了这个div元素内部的p元素上,那么p元素就是这个时间的目标元素。事件冒泡让我们可以在这个div或者更上层的元素上监听click事件,并且时间传播过程中触发回调函数。

冒泡阶段(Bubble Phase)

事件在目标事件上触发后,并不在这个元素上终止。它会随着DOM树一层层向上冒泡,直到到达最外层的根节点。也就是说,同一事件会一次在目标节点的父节点,父节点的父节点...直到最外层的节点上触发。

绝大多数事件是会冒泡的,但并非所有的。具体可见:规范说明

由上我们可以想到,可以使用事件代理来实现对每一个li的监听。代码如下:


window.onload=function(){
  var ulNode=document.getElementById("list");
  ulNode.addEventListener('click',function(e){
       if(e.target&&e.target.nodeName.toUpperCase()=="LI"){/*判断目标事件是否为li*/
         alert(e.target.innerHTML);
       }
     },false);
  
};

你可能感兴趣的

15 条评论
jiangbai333 · 2016年06月22日

辣鸡! 转载不注明出处。。。 一点程序员的基本素养也没有

+4 回复

0

一言不合就骂人,一点程序员的基本素养也没有

papaya · 2018年01月21日
0

@papaya 首先辣鸡不算骂人,其次如果真的是 转载不注明出处 那还真是活该被骂

wenruo · 3月2日
wnow20 · 2015年07月23日

“同一事件会一次在目标节点” 中的 “一次” 应该是 “依次”

+1 回复

sunny120 · 2015年03月22日

e.target&&e.target.nodeName.toUpperCase=="LI"
好像少了括号
应该是:e.target&&e.target.nodeName.toUpperCase()=="LI" 吧!

回复

read_lee · 2015年03月23日

function() 这个括号应该是 () - -

回复

Dont · 2015年03月29日

有几个 “事件”写成了“时间”

回复

Jhon16 · 2015年05月04日

“捕获阶段的主要任务是简历传播路径”,“简历”应该是“遍历”吧

回复

wnow20 · 2015年07月23日

“可以通过将;设置成true来” 中少了 ‘use-capture’

回复

wnow20 · 2015年07月23日

翻译的挺好的,谢谢,算是带我入了个门。

回复

rand · 2015年10月20日

感谢分享,冒昧的讲一个疑惑,我们通过e.target可以判断出事件是在目标阶段,那么如何判断事件是在冒泡阶段或者捕获阶段呢?

回复

苹果小萝卜 · 2015年12月15日

ele.addEventListener(type, fn, false/true)这个方法的第三个参数就决定了到底是在冒泡阶段还是事件捕获阶段发生。 如果为false则为冒泡阶段,如果为true则为捕获阶段.

回复

mochase · 2016年08月22日

第一段代码出错了把,变量i的作用域共享,需要用函数把监听函数包起来,或者将var替换成let

回复

淺の陌 · 2017年03月13日

之前一直迷迷糊糊,看完你的文章终于完全明白了,灰常感谢

回复

Neonlite · 2018年06月01日

写的挺好,通俗易懂,让我加深了一点理解,谢谢。顺带一提,文章有很多错别字哦。

回复

载入中...