快速理解事件委派

悠悠 2023-06-06 08:04 3阅读 0赞

### 概念 ###

利用冒泡机制实现对元素的时间处理程序。即，把对该元素要进行的事件处理，利用冒泡机制，将其处理程序绑定到（委派）祖先级（一般为父级）上进行执行。

要理解事件委派，先掌握两个概念—— 捕获与冒泡

### 捕获与冒泡 ###

假设我们点击页面上的一个元素，这个过程会存在捕获和冒泡阶段。

捕获阶段

从祖先元素一级一级地遍历到点击的元素所在节点的过程，叫捕获阶段。其所经历的元素都会触发点击事件（因为这里是以'click'事件为例子）

冒泡阶段

在捕获结束后已经落在了所点击元素的节点了，接着跟着原来捕获的过程**反向**遍历。其所经历的元素都会触发点击事件（因为这里是以'click'事件为例子）

举个例子吧

例如你点的元素的层级结构是这样的：

body > div > span

那么捕获阶段的过程就是按照上述结构的顺序，而冒泡的顺序就是这样

span > div > body

所以这里再描述一下事件委派，以上述说的结构为例子，假设我原本要对`span`元素绑定一个`click`事件，但是我没有直接绑定到它身上，而是绑定到它的父级元素`div`上，因此我点击了`span`，先经过捕获阶段，再经历冒泡阶段，当冒泡到`div`时，就会触发它的绑定事件了。这就叫**事件委派**

### 事件绑定 ###

事件委派，从名字上理解，就是把一个元素要进行的事件处理程序委派出去。所以我们要知道事件绑定。

事件绑定可以分为四类，哪四类看看这篇文章就知道了 [看了跟不看没区别的文章—摒弃e || window.event旧认识][e _ window.event]

这里要实现事件委派就要用到最高级的方式，`addEventListener`，IE8以下用`attachEvent`

语法

target.addEventListener(type, listener[, useCapture]);

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>String，事件名称，不带'on'，如'click'</td> 
  </tr> 
  <tr> 
   <td>listener</td> 
   <td>Funtcion，事件处理程序，触发type事件要执行的脚本</td> 
  </tr> 
  <tr> 
   <td>useCapture</td> 
   <td>Boolean，默认为false，指定listener在哪个阶段执行。false为冒泡，true为捕获阶段</td> 
  </tr> 
 </tbody> 
</table>

因此，事件委派利用冒泡机制，就是把这里的`useCapture`参数设置为`false`

### 使用场景 ###

场景一

当你有很多元素需要进行绑定监听同一个事件执行同一个操作时，如`ul`下的`li`元素，假设你有一百个甚至多个，你也不想一个个`li`遍历了然后绑定监听事件吧。这时候你只需要利用事件委派对其父元素`ul`绑定一个监听事件即可。

场景二

某个父元素下有多个元素需要进行监听同一事件但执行不同操作，同样可以不需要为每个元素绑定事件，只需要对其父元素绑定这个监听事件，然后从事件内部区分哪个元素，然后执行对应的事件。

场景三

你要监听的对象不确定是否已经存在于DOM中，如果不存在的话，你是没办法获取到这个对象然后进行事件绑定。那么就可以使用事件委派了，对其父元素监听事件，就算此刻不存在与DOM中，后续渲染了之后也能正常执行到监听事件处理程序

### 优点 ###

1.  减少DOM的交互操作，进而减少页面的重绘和重排
2.  减少内存。如果一个个元素绑定监听函数，一个函数就是一个内存，就会占用较多内存。如果统一绑定到父元素上，就只有一个函数占用一个内存了。
3.  对不确定是否存在DOM上的元素进行事件监听，用事件委派就可以解决监听问题。

[e _ window.event]: https://juejin.im/post/5ce21b176fb9a07edb3917ca