漫谈DOM 事件流的三个阶段

一丶 流

什么是流？

比如 react 中的单项数据流，Node.js 中的流，或者本文中的 DOM 事件流，都是流的具体体现。专业地讲，流是程序输入或输出的一个连续的字节序列；通俗地讲，流是有方向的数据。

二丶 事件流

什么是事件流？

假想一下，现在有一组同心圆，你把手指在最里面的圆心上，与此同时，你也正在指着外层的其他同心圆。假设最里面的圆是 DOM 中的一个按钮，那就是说，你点击按钮这个元素的同时，也点击了他的所有父级元素。那么这个点击事件 DOM 要怎么处理呢？事实上，这个点击事件并非只是简单地在被点击的元素上发生一次。那么点击事件是谁先得到通知并响应呢？

事件捕获

事件捕获就是指被点击元素的父级元素应该先接收到事件，并向下传播，就像例子中的按钮点击事件，接收到事件的元素顺序应该为 window > document > body > button.

事件冒泡

事件冒泡跟事件捕获好顺序相反，认为应该是被点击的具体元素先接受到事件：button > body > document > window.

事件阶段

当一个 DOM 事件发生时，要经历三个阶段：

1. 从文档的根节点流向目标对象 ---> 捕获阶段；

2. 在目标对象上被触发 ---> 目标阶段；

3. 回溯到文档的根节点 ---> 冒泡阶段。

三丶 卵用

通过事件监听（addEventListener(type,callback,true)）在父级元素捕获事件，可以阻止事件冒泡（stopPropagation()）引起的问题。

四丶总结

事件流描述的就是事件发生的顺序。

事件捕获：所谓捕获，就像是进行一场狩猎一样，以猎人（不是猎头）的角度来看，已经将猎物（发生事件的元素）活动范围(window)确定了，在外面层层包围，然后缩小包围圈，一层一层由外向内的，直至擒获猎物，即传播到事件发生的具体元素。

目标阶段：以猎物本身的角度讲，比如是一头狮子（不是攻城狮），刚开始只是被猎人们包围，但猎人并不确定自己的具体位置，直到猎人的包围圈足够小，才发现自己。这时候自己就真正成为了他们的目标。

冒泡阶段：还是以狮子角度讲，以狮子的性格，即使是困兽犹斗，也不会坐以待毙的，所以它选择突围（冒泡）。然而外面的猎人（父级元素）有很多，它要一层层地突破，直至逃离了狩猎场（window），才有资格嘲笑愚蠢的人类 0.0 。

阻止事件冒泡：然而对狮子而言，结局并不总是那么美好的，因为自嘲愚蠢的家伙 一般都很精明~ 在以上每个阶段进行的过程中，狮子都可能挂掉，假如这是一群装备精良的盗猎者，他们采用了一些空中侦察技术，并在缩小包围圈（事件捕获阶段）的过程中发现了狮子的踪迹，并用激光制导扯弹麻醉了狮子，那么他们大可以提前打卡下班看小学生打第四节比赛了。这样也就不会出现狮子突围的（冒泡阶段）经典剧情了。也就避免了狮子突围可能造成的伤亡~

就写这么多吧，没有?  ？又是一波差评来了。。不说了，今天没码是有原因的，赶紧去黑两条吴彦祖~

转载于:https://www.cnblogs.com/Slim-Shady/p/5585922.html