快速理解事件委派

[pekonchan]

概念

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

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

捕获与冒泡

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

捕获阶段

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

冒泡阶段

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

举个例子吧

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

body > div > span

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

span > div > body

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

事件绑定

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

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

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

语法

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

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

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

使用场景

场景一

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

场景二

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

场景三

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

优点

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