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

- 日理万妓 2022-12-17 07:27 24阅读 0赞

## 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` 绑定的事件
 *  [合成事件][Link 1]：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"

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

阻止冒泡事件分三种情况

*  阻止合成事件间的冒泡，可以直接使用`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');
            })
        }
    }

[Link 1]: https://zh-hans.reactjs.org/docs/events.html#gatsby-focus-wrapper
[Link 2]: https://zhuanlan.zhihu.com/p/26742034