DOM 事件和 React 事件的区别，如何正确的阻止冒泡

DOM 事件和 React 事件的区别，如何正确的阻止冒泡

DOM 的事件一般会先后经历捕获与冒泡两个阶段，捕获事件是沿着 DOM 树由上往下传递，到达触发事件的元素（target）后，事件开始冒泡，沿着 DOM 树继续向上传递。

IE 9 之前的只支持冒泡

以这段代码为例：

<div class="outer"> <div class="inner"> inner </div> </div>

如果点击了 inner，事件是如何传递的呢？

在事件捕获的机制下，发生 click 的顺序是：

document -> body -> outer -> inner

在事件冒泡的机制下，发生 click 的顺序是：

inner -> outer -> body -> document

那么是不是捕获和冒泡都会执行呢？这和你对事件的定义相关。

在 DOM2 级事件中，事件流同时支持了事件捕获阶段和事件冒泡阶段，作为开发者可以选择事件处理函数在哪一个阶段被调用。

addEventListener(event, handler, useCapture)

在 addEventListener 方法的第三个参数接收一个 bool 值，可以选择当前注册的事件在哪一个阶段被执行。

useCapture 可选值：

true，事件捕获阶段执行false（默认值），事件在冒泡阶段执行

阻止事件冒泡

在前端编写页面的时候，经常会遇到弹窗的场景，如果对弹窗里的元素绑定了事件，通常我们需要阻止这个事件的冒泡，否则会触发弹窗下面的元素的事件。

阻止事件冒泡有三种方式：

1、子元素加上 e.stopPropagation()，事件不会继续冒泡传递。

element.addEventListener('click', function(e){ // handle something... e.stopPropagation(); })

2、handler 函数中返回 false。

element.addEventListener('click', function(e){ // handle something... return false; })

注意，返回 false 不仅仅会阻止冒泡，还会阻止默认事件，也就是 e.preventDefault()。

3、绑定 current 元素， **event.target==event.currentTarget **，让触发事件的元素等于绑定事件的元素，也可以阻止事件冒泡。

以上是 DOM API 中的事件，但在 React 中事件的处理又会有一些不一样。

原生事件与合成事件

首先介绍一下什么是原生事件与合成事件。

原生事件：通过 addEventListener 绑定的事件，具体一点，在 componentDidMount 声明周期中通过 addEventListener 绑定的事件合成事件：React 通过 onClick 等方式注册的事件。合成事件实现了一套自己的事件机制，减少了内存的消耗，也最大程度解决了 IE 浏览器的兼容问题。

当在 React 的页面上点击一个 DOM 元素时，事件最开始会在原生 DOM 上走捕获冒泡流程。React 监听的是 document 上的冒泡阶段。事件冒泡到 document 后，React 将事件再派发到组件树中，然后事件开始在组件树 DOM 中走捕获冒泡流程。

下面通过一个实例来加深一下理解：

const domContainer = document.querySelector('#root') // 绑定在外层的原生点击事件 非documemt层 domContainer.addEventListener('click', e => { console.log('root click') }) class InnerDom extends React.Component { componentDidMount () { document.addEventListener('click', () => { console.log('document click') }) } outClick = (e) => { console.log('out dom click') } innerClick = (e) => { // e.stopPropagation(); //e.nativeEvent.stopImmediatePropagation() console.log('inner dom click') } render () { return <div onClick={this.outClick}> outter <div onClick={this.innerClick} > inner</div> </div> } } ReactDOM.render(<InnerDom />, domContainer)

在这个示例中，分别在组件外为 root 根组件注册一个原生事件，然后在 componentDidMount 中为 document 注册了一个原生事件，在 render() 函数中，为两个 div 注册了 onClick 合成事件。

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Oc7BXbYq-1603370528614)(/Users/admin/笔记/DOM 中的事件.assets/image-20201022200533408.png)]

先来看看点击的输出，当点击 inner 时，输出：

"root click" "inner dom click" "out dom click" "document click"

分析一下上面的输出，事件最开始从原生的 inner DOM 一路冒泡到 body，root 的事件处理器执行，输出 root。注意此时流程还没进入 React，因为 React 监听的是 document 上的事件。

之后开始执行 React 合成事件中的冒泡，因此依此打印了 inner ->outer -> document

理解 React 是通过监听 document 冒泡阶段来代理组件中的事件，这点很重要。

这是我们稍微改动一下代码，在 inner 的事件中加上阻止冒泡的代码。

domContainer.addEventListener('click', e => { console.log('root click') e.stopPropagation(); })

点击 inner 后，输出：

"root click" "inner dom click" "document click"

这样显然不符合预期，那么如么如何阻止冒泡呢？摘录一下这篇知乎的内容

阻止冒泡事件分三种情况

阻止合成事件间的冒泡，可以直接使用e.stopPropagation ()阻止合成事件与最外层 document 上的事件间的冒泡，用e.nativeEvent.stopImmediatePropagation ()阻止合成事件与除最外层 document 上的原生事件上的冒泡，通过判断e.target 来避免 document.body.addEventListener('click',e=>{ // 通过e.target判断阻止冒泡 if(e.target&&e.target.matches('a')){ return; } console.log('body'); }) } }