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');
        })
    }
}