Fanfan's Blog

Better than ever

0%

JavaScript Delegation

Posted on Edited on Disqus:

Q: What is Event Delegation?

A: A way you can add an event listener once for multiple elements with support for adding extra children.

ZZ original

1、这是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的；

2、其实我一直都没弄明白，写这个一是为了备忘，二是给其他的知其然不知其所以然的小伙伴们以参考；

概述：

那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript 高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，我仔细揣摩了一下，这个例子还真是恰当，我就不去想别的例子来解释了，借花献佛，我摘过来，大家认真领会一下事件委托到底是一个什么原理：

有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台 MM 代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台 MM 收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台 MM 也会在收到寄给新员工的快递后核实并代为签收。

这里其实还有 2 层意思的：

第一，现在委托前台的同事是可以代为签收的，即程序中的现有的 dom 节点是有事件的；

第二，新员工也是可以被前台 MM 代为签收的，即程序中新添加的 dom 节点也是有事件的。

为什么要用事件委托：

一般来说，dom 需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的 dom 需要添加事件处理呢？比如我们有 100 个 li，每个 li 都有相同的 click 点击事件，可能我们会用 for 循环的方法，来遍历所有的 li，然后给它们添加事件，那这么做会存在什么影响呢？

在 JavaScript 中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与 dom 节点进行交互，访问 dom 的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少 DOM 操作的原因；如果要用事件委托，就会将所有的操作放到 js 程序里面，与 dom 的操作就只需要交互一次，这样就能大大的减少与 dom 的交互次数，提高性能；

每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用，是硬伤，哈哈），比如上面的 100 个 li，就要占用 100 个内存空间，如果是 1000 个，10000 个呢，那只能说呵呵了，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。

事件委托的原理：

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的 a 加一个 click 点击事件，那么这个事件就会一层一层的往外执行，执行顺序 a>li>ul>div，有这样一个机制，那么我们给最外面的 div 加点击事件，那么里面的 ul，li，a 做点击事件的时候，都会冒泡到最外层的 div 上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

<–new citat begins–>

事件冒泡及捕获:

Original

之前的介绍中已经说到了浏览器的事件冒泡机制。这里再详细介绍一下浏览器处理DOM事件的过程。对于事件的捕获和处理，不同的浏览器厂商有不同的处理机制，这里我们主要介绍W3C对DOM2.0定义的标准事件。

DOM2.0模型将事件处理流程分为三个阶段：一、事件捕获阶段，二、事件目标阶段，三、事件起泡阶段。如图：

delegation-demo

事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。

事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

事件起泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）来组织事件的冒泡传播。

<–new citat ends–>

事件委托怎么实现：

终于到了本文的核心部分了，哈哈，在介绍事件委托的方法之前，我们先来看一段一般方法的例子：

子节点实现相同的功能：

1
2
3
4
5
6
<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

实现功能是点击li，弹出123：

1
2
3
4
5
6
7
8
9
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；

那么我们用事件委托的方式做又会怎么样呢？

1
2
3
4
5
6
window.onload = function(){
  var oUl = document.getElementById("ul1");
  oUl.onclick = function(){
    alert(123);
  }
}

这里用父级 ul 做事件处理，当 li 被点击时，由于冒泡原理，事件就会冒泡到 ul 上，因为 ul 上有点击事件，所以事件就会触发，当然，这里当点击 ul 的时候，也是会触发的，那么问题就来了，如果我想让事件代理的效果跟直接给节点的事件效果一样怎么办，比如说只有点击 li 才会触发，不怕，我们有绝招：

Event 对象提供了一个属性叫 target，可以返回事件的目标节点，我们成为事件源，也就是说，target 就可以表示为当前的事件操作的 dom，但是不是真正操作 dom，当然，这个是有兼容性的，标准浏览器用 ev.target，IE 浏览器用 event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用 nodeName 来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较（习惯问题）：

Notes

I think we can use target.matches("li") here to check if we click li-element and then implement the cb. It seems easy and effecient.

1
2
3
4
5
6
7
8
9
10
11
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 被点击的效果都不一样，那么用事件委托还有用吗？

1
2
3
4
5
6
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 操作，如果用事件委托，能进行优化吗？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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 节点下的操作，那么如果是新增的节点，新增的节点会有事件吗？也就是说，一个新员工来了，他能收到快递吗？

看一下正常的添加节点的方法：

1
2
3
4
5
6
7
<input type="button" name="" id="btn" value="添加" />
<ul id="ul1">
  <li>111</li>
  <li>222</li>
  <li>333</li>
  <li>444</li>
</ul>

现在是移入 li，li 变红，移出 li，li 变白，这么一个效果，然后点击按钮，可以向 ul 中添加一个 li 子节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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 是没有事件的，说明添加子节点的时候，事件没有一起添加进去，这不是我们想要的结果，那怎么做呢？一般的解决方案会是这样，将 for 循环用一个函数包起来，命名为 mHover，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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 操作，在优化性能方面是不可取的，那么有事件委托的方式，能做到优化吗？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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 操作，这才是事件委托的精髓所在。

在这里先感谢一下@苍茫大地 NV 的提问，提的问题非常好！👏👏👏

他的问题是：

现在给一个场景 ul > li > div > p，div 占满 li，p 占  满 div，还是给 ul 绑定时间，需要判断点击的是不是 li（假设 li 里面的结构是不固定的），那么 e.target 就可能是 p，也有可能是 div，这种情况你会怎么处理呢？

那我们现在就再现一下他给的场景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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 上，下面我直接给解决方案：

1
2
3
4
5
6
7
8
9
10
11
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之类的，本身就没用冒泡的特性，自然就不能用事件委托了。

好了，今天就到这里，下次我想介绍一下事件绑定，欢迎大家关注和阅读，以上纯属个人见解，如有不对的地方，万望指正，不胜感谢！

I will definitely need to read this article repeatedly many times…or maybe not, too many redundant explainations above.

Update

We can use Element.matches() to check if we click the target element.

Usage
let result = element.matches(selectorString);

  • result: true / false.
  • selectorString: css selector string.

e.g.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<h1>What is Event Delegation?</h1>
<p>
  A way you can add an event listener once for multiple elements with support for adding extra children.
</p>

<ul id="myList">
  <li>Apple</li>
  <li>Banana</li>
  <li>Kiwi</li>
</ul>

<script>
  const myList = document.querySelector("#myList")
  myList.addEventListener('click', (e) => {
    //It can be written as if(e.target.textContent === 'Kiwi') then add eventListener to this chosen element
    if (e.target.matches('li')) {
      e.target.style.background = 'red'
    }
  })

  const newLi = document.createElement('li')
  newLi.textContent = "Lichi"
  myList.appendChild(newLi)
//Now the new created li will be dynamically added the same event listener due to delegation.
</script>