转载：https://blog.csdn.net/weixin_41646716/article/details/81099880
一块：
事件流描述的是从页面接收事件的顺序。
IE的事件是冒泡事件流，
而firefox的事件流是捕获事件流。
1.事件冒泡
IE的事件流叫做事件冒泡，即事件从最具体的元素到不具体的元素。
好比气泡从水底下一直向上冒泡，像dom树一样，一直到根元素。
2.事件捕获
即从不具体的元素到具体的元素
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
第一种：事件冒泡
IE提出的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点，看一下以下示例：
接下来我们点击一下页面上的p元素，看看会发生什么：
正如上面我们所说的，它会从一个最具体的的元素接收，然后逐级向上传播， p=>button=>div=>body..........事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。
第二种：事件捕获
网景公司提出的事件流叫事件捕获流。
事件捕获流的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件，针对上面同样的例子，点击按钮，那么此时click事件会按照这样传播：（下面我们就借用addEventListener的第三个参数来模拟事件捕获流）
同样我们看一下后台的打印结果：
react有专属的阻止事件冒泡方法，e.nativeEvent.stopImmediatePropagation()
handleBarDisplay(e){
e.nativeEvent.stopImmediatePropagation();
this.setState({barDisplay:false})
}
二块：
事件捕获和事件冒泡属于两个相反的过程，这里可以有一个我感觉十分恰当的比喻，当你把一个可以漂浮在水面上的物品，使劲向水里砸下去，它会首先有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后由于浮力大于物体自身的重力，物体会在到达最低点（ 最具体元素）之后漂浮到水面上，这个过程相对于事件捕获是一个回溯的过程，即事件冒泡。
好了，对于事件捕获和事件冒泡有了一个概念上的理解，那我们就可以开始考虑实际的编码过程中的实际应用了。先贴上本文所需要的代码
<!DOCTYPE html> <html> <head> <title>event</title> </head> <body> <div > welcome <h5 >hello</h5> <h5 >world</h5> </div> <script type="text/javascript"> var obj1=document.getElementById('obj1'); var obj2=document.getElementById('obj2'); obj1.addEventListener('click',function(){ alert('hello'); },false); obj2.addEventListener('click',function(){ alert('world'); }) </script> </body> </html>