什么是流？
比如 react 中的单项数据流，Node.js 中的流，或者本文中的 DOM 事件流，都是流的具体体现。专业地讲，流是程序输入或输出的一个连续的字节序列；通俗地讲，流是有方向的数据。
二丶 事件流
什么是事件流？
假想一下，现在有一组同心圆，你把手指在最里面的圆心上，与此同时，你也正在指着外层的其他同心圆。假设最里面的圆是 DOM 中的一个按钮，那就是说，你点击按钮这个元素的同时，也点击了他的所有父级元素。那么这个点击事件 DOM 要怎么处理呢？事实上，这个点击事件并非只是简单地在被点击的元素上发生一次。那么点击事件是谁先得到通知并响应呢？
事件捕获
事件捕获就是指被点击元素的父级元素应该先接收到事件，并向下传播，就像例子中的按钮点击事件，接收到事件的元素顺序应该为 window > document > body > button.
事件冒泡
事件冒泡跟事件捕获好顺序相反，认为应该是被点击的具体元素先接受到事件：button > body > document > window.
事件阶段
当一个 DOM 事件发生时，要经历三个阶段：
1. 从文档的根节点流向目标对象 ---> 捕获阶段；
2. 在目标对象上被触发 ---> 目标阶段；
3. 回溯到文档的根节点 ---> 冒泡阶段。
三丶 卵用
通过事件监听（addEventListener(type,callback,true)）在父级元素捕获事件，可以阻止事件冒泡（stopPropergation()）引起的问题。
下载本文