事件传递有两种方式:冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <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})
}

相关文章:

  • 2021-10-18
  • 2021-07-31
  • 2017-12-02
  • 2019-08-13
  • 2018-12-24
  • 2019-08-31
  • 2021-09-17
猜你喜欢
  • 2021-09-29
  • 2021-09-09
  • 2021-11-27
  • 2022-01-09
  • 2021-11-27
相关资源
相似解决方案