事件捕获、事件冒泡以及事件代理

DOM事件流

话很少说，先附上W3C连接：www.w3.org/TR/DOM-Leve…

上图是W3C标准的DOM事件流模型图，从图中能够看出，元素事件响应在DOM树中是从顶层的Window开始“流向”目标元素（），而后又从目标元素“流向”顶层的Window。

一般，咱们将这种事件流向分为三个阶段： 捕获阶段，目标阶段，冒泡阶段。

• 捕获阶段是指事件响应从最外层的Window开始，逐级向内层前进，直到具体事件目标元素。在捕获阶段，不会处理响应元素注册的冒泡事件。
• 目标阶段指触发事件的最底层的元素，如上图中的。
• 冒泡阶段与捕获阶段相反，事件的响应是从最底层开始一层一层往外传递到最外层的Window。

如今，咱们就能够知道，DOM事件流的三个阶段是先捕获阶段，而后是目标阶段，最后才是冒泡阶段。咱们时常面试所说的先捕获后冒泡也由此而来。事件代理就是利用事件冒泡或事件捕获的机制把一系列的内层元素事件绑定到外层元素。

事件冒泡和事件捕获

实际操做中，咱们能够经过 element.addEventListener() 设置一个元素的事件模型为冒泡事件或者捕获事件。
先来看一下 addEventListener 函数的语法：

element.addEventListener(type, listener, useCapture)
复制代码

• type
  监听事件类型的字符串
• listener
  事件监听回调函数，即事件触发后要处理的函数
• useCapture
  默认值false，表示事件冒泡；设为true时，表示事件捕获

事件冒泡举例

<div id="a" style="width: 100%; height: 300px;background-color: antiquewhite;">
	a
	<div id="b" style="width: 100%; height: 200px;background-color: burlywood;">
		b
		<div id="c" style="width: 100%; height: 100px;background-color: cornflowerblue;">
			c
		</div>
	</div>
</div>
<script> var a = document.getElementById('a') var b = document.getElementById('b') var c = document.getElementById('c') //注册冒泡事件监听器 a.addEventListener('click', () => {console.log("冒泡a")}) b.addEventListener('click', () => {console.log('冒泡b')}) c.addEventListener('click', () => {console.log("冒泡c")}) </script>
复制代码

当咱们点击c时，执行结果以下：

冒泡事件的执行顺序为：c -> b -> a

事件捕获举例

<div id="a" style="width: 100%; height: 300px;background-color: antiquewhite;">
	a
	<div id="b" style="width: 100%; height: 200px;background-color: burlywood;">
		b
		<div id="c" style="width: 100%; height: 100px;background-color: cornflowerblue;">
			c
		</div>
	</div>
</div>
<script> var a = document.getElementById('a') var b = document.getElementById('b') var c = document.getElementById('c') //注册捕获事件监听器 a.addEventListener('click', () => {console.log("捕获a")}, true) b.addEventListener('click', () => {console.log('捕获b')}, true) c.addEventListener('click', () => {console.log("捕获c")}, true) </script>
复制代码

当咱们点击c时，运行结果以下：

捕获事件的执行顺序为：a -> b -> c

事件捕获VS事件冒泡

咱们将上述的代码a,b,c三个元素都注册捕获和冒泡事件，并以元素c做为触发事件的主体，即事件流中的目标阶段。

<div id="a" style="width: 100%; height: 300px;background-color: antiquewhite;">
	a
	<div id="b" style="width: 100%; height: 200px;background-color: burlywood;">
		b
		<div id="c" style="width: 100%; height: 100px;background-color: cornflowerblue;">
			c
		</div>
	</div>
</div>
<script> var a = document.getElementById('a') var b = document.getElementById('b') var c = document.getElementById('c') a.addEventListener('click', () => {console.log("冒泡a")}) b.addEventListener('click', () => {console.log('冒泡b')}) c.addEventListener('click', () => {console.log("冒泡c")}) a.addEventListener('click', () => {console.log("捕获a")}, true) b.addEventListener('click', () => {console.log('捕获b')}, true) c.addEventListener('click', () => {console.log("捕获c")}, true) </script>
复制代码

a,b,c三个元素都是先注册冒泡事件再注册捕获事件，当咱们点击c时，执行结果又是如何？请看下图。

从执行结果能够看到，a,b两个元素的事件响应都是先捕获后冒泡的，但对于触发事件的目标元素c，事件的响应并无遵循先捕获后冒泡的规则，这是为何？由于 目标元素是事件触发主体处于事件流中的目标阶段，处理事件的顺序是根据注册顺序来执行的。

咱们将上图中c元素的事件注册调换一下顺序，就能够知道目标阶段执行事件的顺序了，以下图：

对于非目标元素，若是咱们要先执行冒泡事件再执行捕获事件，咱们能够在注册监听器时经过暂缓执行捕获事件，等冒泡事件执行完以后，在执行捕获事件。

事件代理（事件委托）

咱们知道了事件冒泡和事件捕获的原理，那么对于事件委托就比较容易理解了。
重复一遍，**事件代理就是利用事件冒泡或事件捕获的机制把一系列的内层元素事件绑定到外层元素。**至于为何一般咱们说事件代理是利用事件冒泡的机制来实现的，只是你们习觉得常而已。

<ul id="item-list">
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
	<li>item4</li>
</ul>
复制代码

对于上述的列表元素，咱们但愿将用户点击了哪一个item打印出来，一般咱们能够给每一个item注册点击事件监听器，可是须要对每一个元素进行事件监听器的注册；可是经过事件代理，咱们能够将多个事件监听器减小为一个，这样就减小代码的重复编写了。
利用事件冒泡或事件捕获实现事件代理：

var items = document.getElementById('item-list');
//事件捕获实现事件代理
items.addEventListener('click', (e) => {console.log('捕获：click ',e.target.innerHTML)}, true);
//事件冒泡实现事件代理
items.addEventListener('click', (e) => {console.log('冒泡：click ',e.target.innerHTML)}, false);
复制代码

当点击列表中的item时，执行结果以下：

所以， 事件代理既能够经过事件冒泡来实现，也能够经过事件捕获来实现。

总结

以上的东西总结起来就是有如下几点：

• DOM事件流有3个阶段：捕获阶段，目标阶段，冒泡阶段；三个阶段的顺序为：捕获阶段——目标阶段——冒泡阶段；
• 对于非目标阶段的元素，事件响应执行顺序遵循先捕获后冒泡的原则；经过暂缓执行捕获事件，能够达到先冒泡后捕获的效果；
• 对于目标元素，事件响应执行顺序根据的事件的执行顺序执行；
• 事件捕获是从顶层的Window逐层向内执行，事件冒泡则相反；
• 事件委托（事件代理）是根据事件冒泡或事件捕获的机制来实现的。

题外话

一直不理解事件流的模型为何是先捕获后冒泡？直到看到第一张图的那个Window，才明白为何是先捕获后冒泡了。由于Window对象是直接面向用户的，那么用户触发一个事件，如点击事件，确定是用window对象开始的，因此天然就是先捕获后冒泡啦。