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

·  阅读 7008

DOM事件流

话不多说,先附上W3C链接:www.w3.org/TR/DOM-Leve…

image.png

上图是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时,执行结果如下:

image.png

冒泡事件的执行顺序为: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时,运行结果如下:

image.png

捕获事件的执行顺序为: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时,执行结果又是如何?请看下图。

image.png

从执行结果可以看到,a,b两个元素的事件响应都是先捕获后冒泡的,但对于触发事件的目标元素c,事件的响应并没有遵循先捕获后冒泡的规则,这是为什么?因为目标元素是事件触发主体处于事件流中的目标阶段,处理事件的顺序是根据注册顺序来执行的

我们将上图中c元素的事件注册调换一下顺序,就可以知道目标阶段执行事件的顺序了,如下图:

image.png

对于非目标元素,如果我们要先执行冒泡事件再执行捕获事件,我们可以在注册监听器时通过暂缓执行捕获事件,等冒泡事件执行完之后,在执行捕获事件。

事件代理(事件委托)

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

<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时,执行结果如下:

image.png


因此,事件代理既可以通过事件冒泡来实现,也可以通过事件捕获来实现

总结

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

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

题外话

一直不理解事件流的模型为什么是先捕获后冒泡?直到看到第一张图的那个Window,才明白为什么是先捕获后冒泡了。因为Window对象是直接面向用户的,那么用户触发一个事件,如点击事件,肯定是用window对象开始的,所以自然就是先捕获后冒泡啦。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改