事件冒泡与事件捕获

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将 <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 })

}