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'