DOM系列之DOM事件流

---

html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。
当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。
那么是先执行父元素的单击事件，还是先执行div的单击事件 ？？？

1、什么是事件流

当时的2大浏览器霸主谁也不服谁！
IE 提出从目标元素开始，然后一层一层向外接收事件并响应，也就是冒泡型事件流。
Netscape（网景公司）提出从最外层开始，然后一层一层向内接收事件并响应，也就是捕获型事件流。

江湖纷争，武林盟主也脑壳疼！！！

最终，w3c 采用折中的方式，平息了战火，制定了统一的标准 —–— 先捕获再冒泡。
现代浏览器都遵循了此标准，所以当事件发生时，会经历3个阶段。

我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。

事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。

比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。

2、DOM 事件流分为3个阶段

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

3、什么是事件冒泡

IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。

4、什么是事件捕获

网景最早提出，由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

5、描述

1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
2. onclick 和 attachEvent 只能得到冒泡阶段。
3. addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
4. 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
5. 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
6. 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，我们后面讲解。

6、示例

6.1、事件冒泡

<div class="father">
    <div class="son">son盒子</div>
</div>
<script>
    // onclick 和 attachEvent（ie） 在冒泡阶段触发
    // 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 
    // son -> father ->body -> html -> document
    var son = document.querySelector('.son');
    // 给son注册单击事件
    son.addEventListener('click', function() {
      
      
        alert('son');
    }, false);
    // 给father注册单击事件
    var father = document.querySelector('.father');
    father.addEventListener('click', function() {
      
      
        alert('father');
    }, false);
    // 给document注册单击事件，省略第3个参数
    document.addEventListener('click', function() {
      
      
        alert('document');
    })
</script>

6.2、事件捕获

<div class="father">
	<div class="son">son盒子</div>
</div>
<script>
	// 如果addEventListener() 第三个参数是 true 那么在捕获阶段触发
	// document -> html -> body -> father -> son
	var son = document.querySelector(".son");
	// 给son注册单击事件，第3个参数为true
	son.addEventListener(
		"click",
		function () {
      
      
			alert("son");
		},
		true
	);
	var father = document.querySelector(".father");
	// 给father注册单击事件，第3个参数为true
	father.addEventListener(
		"click",
		function () {
      
      
			alert("father");
		},
		true
	);
	// 给document注册单击事件，第3个参数为true
	document.addEventListener(
		"click",
		function () {
      
      
			alert("document");
		},
		true
	);
</script>

---

后记

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！