彻底搞懂原生事件流和 React 事件流

我能无限顿悟
1,031 阅读9分钟

事件系统，业务开发中只要需要与用户进行交互，那么事件是必不可少的，dom 中存在很多事件，比如 click，scroll，focus 等等。我们将深入事件系统中，以及事件中常用的一些操作比如 preventDefault 和 stopPropagation。同时了解事件分发，以及 capturing 和 bubbling。本文将会有大量的例子。

capturing and bubbling

dom 是一个 tree 模型，当事件进行传播的时候会沿着 dom 的结构进行传播。

事件对象被分派到 event target，但是开始分派之前，必须首先确定事件对象的传播路径。下面这张图呈现出了 event flow。

eventflow.svg

事件传播路径是事件通过的当前事件目标的有序列表。这个传播路径反映了文档的层次树结构。列表中的最后一项是 event target，列表中前面的项称为目标的祖先，紧接在前面的项称为目标的父项。

一旦确定了传播路径，事件对象就会经过一个或多个事件阶段。共有三个事件阶段：capture phase，target phase 和 bubble phase。如果不支持某个阶段，或者事件对象的传播已停止，则该阶段将被跳过。例如，如果将 bubble 属性设置为 false， 则将跳过 bubble 阶段，如果在调度之前调用了 stopPropagation，则将跳过所有阶段。事件对象将会完成如下三个阶段：

  • capture 阶段：事件对象通过目标的祖先从 window 传播到目标的父级。此阶段也称为捕获阶段。
  • target 阶段：事件对象到达事件对象的事件目标。此阶段称为目标阶段。如果事件类型表明事件没有冒泡，则事件对象将在此阶段完成后停止。
  • bubble 阶段：事件对象以相反的顺序通过目标的祖先传播，从目标的父级开始，到 window 结束。此阶段也称为冒泡阶段。

假设存在这样一个 html 片段

<html>
  <body>
    <div id="A">
      <div id="B">
        <div id="C"></div>
      </div>
    </div>
  </body>
</html>

给 C 增加一个监听器，第三个参数为 true 代表开启了捕获。

document.getElementById('C').addEventListener(
  'click',
  function (e) {
    console.log('#C was clicked')
  },
  true
)

当用户点击 C 的时候，捕获阶段的分发流是

window => document => html => body => ... => 目标对象的父

target 阶段就是目标对象

冒泡阶段的事件流是

目标对象父 => ... => body => html => document => window

使用一个具体的例子来看看总体效果，查看例子的代码

html 片段

<html>
  <body>
    <div id="A">
      <div id="B">
        <div id="C"></div>
      </div>
    </div>
  </body>
</html>

js 片段

// 捕获阶段
document.addEventListener(
  'click',
  function (e) {
    console.log('click on document in capturing phase')
  },
  true
)
// document.documentElement == <html>
document.documentElement.addEventListener(
  'click',
  function (e) {
    console.log('click on <html> in capturing phase')
  },
  true
)
document.body.addEventListener(
  'click',
  function (e) {
    console.log('click on <body> in capturing phase')
  },
  true
)
document.getElementById('A').addEventListener(
  'click',
  function (e) {
    console.log('click on #A in capturing phase')
  },
  true
)
document.getElementById('B').addEventListener(
  'click',
  function (e) {
    e.stopPropagation()
    console.log('click on #B in capturing phase')
  },
  true
)
document.getElementById('C').addEventListener(
  'click',
  function (e) {
    console.log('click on #C in capturing phase')
  },
  true
)

// 冒泡阶段
document.addEventListener(
  'click',
  function (e) {
    console.log('click on document in bubbling phase')
  },
  false
)
// document.documentElement == <html>
document.documentElement.addEventListener(
  'click',
  function (e) {
    console.log('click on <html> in bubbling phase')
  },
  false
)
document.body.addEventListener(
  'click',
  function (e) {
    console.log('click on <body> in bubbling phase')
  },
  false
)
document.getElementById('A').addEventListener(
  'click',
  function (e) {
    console.log('click on #A in bubbling phase')
  },
  false
)
document.getElementById('B').addEventListener(
  'click',
  function (e) {
    console.log('click on #B in bubbling phase')
  },
  false
)
document.getElementById('C').addEventListener(
  'click',
  function (e) {
    console.log('click on #C in bubbling phase')
  },
  false
)

console 的输出取决于点击哪个元素。如果点击 C 元素，将会看到如下输出

click on document in capturing phase
click on <html> in capturing phase
click on <body> in capturing phase
click on #A in capturing phase
click on #B in capturing phase
click on #C in capturing phase
click on #C in bubbling phase
click on #B in bubbling phase
click on #A in bubbling phase
click on <body> in bubbling phase
click on <html> in bubbling phase
click on document in bubbling phase

也可以其他元素，比如点击 A 元素，将会看到如下输出

click on document in capturing phase
click on <html> in capturing phase
click on <body> in capturing phase
click on #A in capturing phase
click on #A in bubbling phase
click on <body> in bubbling phase
click on <html> in bubbling phase
click on document in bubbling phase

event.stopPropagation()

当调用它时，从那时起，事件将停止传播到它本来会传播到的任何元素。这适用于两个方向(捕获和冒泡)。因此，如果您在捕获阶段的任何地方调用 stopPropagation，事件将永远不会到达目标阶段或冒泡阶段。如果在冒泡阶段调用它，它以及经历了捕获阶段，但它会从你调用它的点组织冒泡。

用上述相同的例子，在 B 元素的捕获阶段调用 stopPropagation

document.getElementById('B').addEventListener(
  'click',
  function (e) {
    // 阻止事件传播
    e.stopPropagation()
    console.log('click on #B in bubbling phase')
  },
  false
)

此时点击 C 元素，输出如下

click on document in capturing phase
click on <html> in capturing phase
click on <body> in capturing phase
click on #A in capturing phase
click on #B in capturing phase

可以看出到达 B 元素的捕获阶段就停止了。

如果在 A 元素的冒泡阶段调用 stopPropagation 会如何呢? 修改代码

document.getElementById('A').addEventListener(
  'click',
  function (e) {
    e.stopPropagation()
    console.log('click on #A in bubbling phase')
  },
  false
)

点击 C 元素，输出如下

click on document in capturing phase
click on <html> in capturing phase
click on <body> in capturing phase
click on #A in capturing phase
click on #B in capturing phase
click on #C in capturing phase
click on #C in bubbling phase
click on #B in bubbling phase
click on #A in bubbling phase

可以在冒泡阶段的 A 元素后就停止了冒泡。

event.stopImmediatePropagation

stopImmediatePropagation() 方法阻止监听同一事件的其他事件监听器被调用。相关例子

如果多个事件监听器被附加到相同元素的相同事件类型上，当此事件触发时，它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行 stopImmediatePropagation() ，那么剩下的事件监听器都不会被调用。

看如下例子

<html>
  <body>
    <div id="A">I am the #A element</div>
  </body>
</html>

document.getElementById('A').addEventListener(
  'click',
  function (e) {
    console.log('When #A is clicked, I shall run first!')
  },
  false
)

document.getElementById('A').addEventListener(
  'click',
  function (e) {
    console.log('When #A is clicked, I shall run second!')
    e.stopImmediatePropagation()
  },
  false
)

document.getElementById('A').addEventListener(
  'click',
  function (e) {
    console.log(
      'When #A is clicked, I would have run third, if not for stopImmediatePropagation'
    )
  },
  false
)

给 A 元素的点击事件增加了 3 个监听器，但是在第二个监听器出调用了 stopImmediatePropagation，点击 A 元素，输出如下

When #A is clicked, I shall run first!
When #A is clicked, I shall run second!

可以看出第三次的监听器并没有执行。并且永远不会被执行，因为在第二次的内部调用了 stopImmediatePropagation

event.preventDefault()

顾名思义就是阻止默认行为。这个不是很好理解，一般什么样的元素会存在默认行为呢？

比如使用 a 标签，a 标签上有 href 属性

<a id="avett" href="https://www.baidu.com">
  bai du
</a>

正常点击 bai du 会跳转到百度的页面，但是如果增加 event.preventDefault() 会如何呢？

document.getElementById('avett').addEventListener(
  'click',
  function (e) {
    e.preventDefault()
    console.log(
      'Maybe we should just play some of their music right here instead?'
    )
  },
  false
)

当点击 bai du 后，页面并没有发生跳转，而是输出了

Maybe we should just play some of their music right here instead?

可以看出 a 标签的默认行为已经被停止了。

其他的默认行为比如 form 的 submit，通过在 button 上增加属性 type="submit" 可以默认触发 form 的 submit 函数，这种也可以通过调用 preventDefault() 函数来禁止掉默认行为。

扩展

了解了原生事件系统后，我们可以探索下 React 的事件系统，React 事件系统在 v16 和 v17 发生了一个大的变化。如下图

1

在 v16 相关事件挂载到 document 上，而 v17 挂载到 root 节点上。

下面我们将通过对比 v16 和 v17 来对 React 事件系统进行对比，从而也可以加深对原生事件系统的理解。

假设存在这样一个代码片段

function App() {
  return (
    <div id="xxx">
      <div
        onClick={event => {
          console.log('click #A')
        }}
      >
        #A
      </div>
      <div
        onClick={event => {
          console.log('click #B')
        }}
      >
        #B
      </div>
    </div>
  )
}

const root = document.getElementById('root')

ReactDOM.render(<App />, root)

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

A 和 B 都加了点击事件，同时 root 节点增加了原生的 click 的监听器，在回调函数中调用 stopPropagation()。此时点击 A 或者 B

在 v16 中，A 和 B 的 click 事件都没有触发，只触发了 root 节点的 click 事件。

v16-1.gif

在 v17 中，A 和 B 的 click 事件都触发了，同时也触发了 root 节点的 click 事件。

v17-1.gif

因为在 root 节点的回调中，我们调用了 stopPropagation()，因此在 v16 版本中不会触发 A 和 B 的 click 事件，因为在 v16 中节点是挂载到 document 上，而在 v17 中是挂载到 root 节点上，所以 v17 正常，v16 存在问题。

继续修改上述的代码，后续我们只针对 v17 进行修改。

const root = document.getElementById('root')

function App() {
  return (
    <div
      id="xxx"
      onClick={() => {
        console.log('xxxxx')
      }}
    >
      <div
        onClick={event => {
          event.stopPropagation()
          console.log('click #A')
        }}
      >
        #A
      </div>
      <div
        onClick={event => {
          console.log('click #B')
        }}
      >
        #B
      </div>
    </div>
  )
}

ReactDOM.render(<App />, root)

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

document.getElementById('xxx').addEventListener('click', e => {
  console.log('native xxx')
})

在 A 事件上调用 stopPropagation()，同时给 xxx 元素上增加一个原生的事件，一个 React 的事件。此时点击 A 元素会输入什么？

native xxx
click #A
click root

可见 xxx 元素上的 React 事件并没有触发，因为 React 内部会处理相关事件，使其与原生保持一致。但是我们通过调用 addEventListener 增加的事件，React 并没有进行处理。根据之前说的冒泡的顺序是从当前元素一直冒泡到顶部节点。而 A 的 React 事件是挂载到 root 节点上，root 节点是 xxx 节点的父，因此根据顺序应该是 xxx => root。所以输出的顺序是 native xxx => click #A => click root。

继续修改上述代码，在 xxx 节点增加捕获事件，同时在回调中调用 stopPropagation()

const root = document.getElementById('root')

root.addEventListener('click', e => {
  e.stopImmediatePropagation()
  console.log('root click stopImmediatePropagation')
})
function App() {
  return (
    <div
      id="xxx"
      onClick={() => {
        console.log('xxxxx')
      }}
      onClickCapture={event => {
        event.stopPropagation()
        console.log('click xxxx capture')
      }}
    >
      <div
        onClick={event => {
          event.stopPropagation()
          console.log('click #A')
        }}
        onClickCapture={e => {
          console.log('click #B capture')
        }}
      >
        #A
      </div>
      <div
        onClick={event => {
          console.log('click #B')
        }}
      >
        #B
      </div>
    </div>
  )
}

ReactDOM.render(<App />, root)

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

document.getElementById('xxx').addEventListener('click', e => {
  console.log('native xxx')
})

此时点击 A 看发生了什么？输出如下

click xxxx capture

根据上述原生事件发生的顺序，如果在某个阶段阻止了事件的传播，那么后续的阶段也就会被停止。因此当我们在 xxx 节点增加了捕获事件后，后续的事件都不将会触发，root 节点的原生事件也不会被出发。因此默认增加的原生监听器是冒泡事件。

继续修改上述代码，在 root 节点调用 stopImmediatePropagation()

const root = document.getElementById('root')

root.addEventListener('click', e => {
  e.stopImmediatePropagation()
  console.log('root click stopImmediatePropagation')
})

function App() {
  return (
    <div
      id="xxx"
      onClick={() => {
        console.log('xxxxx')
      }}
    >
      <div
        onClick={event => {
          console.log('click #A')
        }}
      >
        #A
      </div>
      <div
        onClick={event => {
          console.log('click #B')
        }}
      >
        #B
      </div>
    </div>
  )
}

ReactDOM.render(<App />, root)

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

document.getElementById('xxx').addEventListener('click', e => {
  console.log('native xxx')
})

点击 A 原生，会发生什么？输出如下

native xxx
root click stopImmediatePropagation

根据上文说的 stopImmediatePropagation() 会组织后续监听事件的执行。因此现在 A 事件 和 B 事件以及 root 事件都不会触发了。那么为什么会输出 native xxx 呢？因为这个是原生添加到 xxx 元素的监听器，并不受 root 的影响。

目前 React 并没有暴露出 stopImmediatePropagation 事件，因为我们没办法在一个元素上写两个 click。因此问题不大。

可以看出 React 现在事件基本和原生事件流保持一致了，但是如果要结合原生事件一起使用的话，只要弄清楚事件流即可。

原文章地址

avatar
文章
阅读
粉丝
相关推荐
react 18 事件研究之原生事件和react合成事件触发顺序
997阅读
 · 
2点赞
理解 DOM 事件流
928阅读
 · 
12点赞
深入理解 JavaScript 事件流机制：冒泡、捕获及事件代理
4.4k阅读
 · 
42点赞
在 React Router 中使用 JWT
302k阅读
 · 
172点赞
基于 ChatGPT 和 React 搭建 JSON 转 TS 的 Web 应用
254k阅读
 · 
214点赞
深入探究 React 原生事件的工作原理
2.9k阅读
 · 
35点赞
React团队回应用Vite替换Create React App的建议
63k阅读
 · 
252点赞
React17 事件机制
3.4k阅读
 · 
30点赞
React17事件机制
7.0k阅读
 · 
68点赞
「React 深入」React事件系统与原生事件系统究竟有何区别？
3.5k阅读
 · 
68点赞

友情链接：