React 为什么要把事件挂载到 document 上 & 事件机制源码分析

何嵬嵬

于 2024-02-21 18:23:02 发布

阅读量916

点赞数 10

文章标签： react.js javascript 前端 ecmascript 前端框架

本文链接：https://blog.csdn.net/weixin_42637593/article/details/136218117

版权

前言我们都知道 React 组件绑定事件的本质是代理到 document 上，然而面试被问到，为什么要这么设计，有什么好处吗？我知道肯定不会是因为虚拟 DOM 的原因，因为 Vue 的事件就能挂载到真实的 DOM 节点。所以继续往下探究吧React 模拟 DOM 事件冒泡的原理设有一段代码如下<!DOCTYPE html><html lang="en">...

摘要由CSDN通过智能技术生成

前言

我们都知道 React 组件绑定事件的本质是代理到 document 上，然而面试被问到，为什么要这么设计，有什么好处吗？

我知道肯定不会是因为虚拟 DOM 的原因，因为 Vue 的事件就能挂载到真实的 DOM 节点。所以继续往下探究吧

React 模拟 DOM 事件冒泡的原理

设有一段代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react demo</title>
    <style>
      #parent {
        width: 200px;
        height: 200px;
        background-color: black;
        display: flex;
        align-items: center;
        justify-content: center;;
      }
      #child {
        width: 100px;
        height: 100px;
        background-color: #FFF;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      ReactDOM.render(
        <div id="parent" onClick={() => { console.log('parent!') }}>
          <div id="child" onClick={() => { console.log('child!') }}></div>
        </div>,
        document.getElementById('app')
      );
    </script>
  </body>
</html>

我们在 child 和 parent 两个节点都挂上了 onClick 函数，并且点击 child 触发事件，的确先输出 child！后输出 parent！。此刻你们或许留意到了下图，浏览器的反馈是事件的确只有一个，就是挂在 document 上的。

这个事件就是 dispatchDiscreteEvent。简言之，react 自己定了一个 event 对象，存放着 onClic

最低0.47元/天解锁文章

何嵬嵬

关注

10
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
React 为什么要把事件挂载到 document 上 & 事件机制源码分析

前言我们都知道 React 组件绑定事件的本质是代理到 document 上，然而面试被问到，为什么要这么设计，有什么好处吗？我知道肯定不会是因为虚拟 DOM 的原因，因为 Vue 的事件就能挂载到真实的 DOM 节点。所以继续往下探究吧React 模拟 DOM 事件冒泡的原理设有一段代码如下<!DOCTYPE html><html lang="en"&gt...
复制链接

扫一扫