react的事件机制

对事件机制的初步理解和验证

表象理解

react 事件机制基本理解：react自身实现了一套自己的事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等，虽然和原生的是两码事，但也是基于浏览器的事件机制下完成的。

我们都知道react 的所有事件并没有绑定到具体的dom节点上而是绑定在了document 上，然后由统一的事件处理程序来处理，同时也是基于浏览器的事件机制（冒泡），所有节点的事件都会在 document 上触发。

验证理解

所有事件均注册到了元素的最顶层-document 上 节点的事件由统一的入口处理 为了方便，直接创建一个项目。

import React, { Component } from 'react'

export default class user extends Component {
    componentDidMount() {
        document.getElementById('btn-reactandnative').addEventListener('click', (e) => {
            console.log('原生+react 事件:   原生事件执行');
        });
    }
    handleNativeAndReact = (e) => {
        console.log('原生+react 事件:  当前执行react事件');
    }
    handleClick = (e) => {
        console.log('button click');
    }
    render() {
        return <div className="pageIndex"><p>react event!!!</p>
            <button id="btn-confirm" onClick={this.handleClick}>react 事件</button>


            <button id="btn-reactandnative" onClick={this.handleNativeAndReact}>原生 + react 事件</button>
        </div>
    }
}

代码中，给两个 button绑定了合成事件，单独给 btn#btn-reactandnative绑定了一个原生的事件。
然后看下 chrome 控制台，查看事件侦听器上注册的事件
只有react事件的节点 的document上有事件，dom节点上没有事件

react事件和原生事件都有的节点 的document上有事件，dom节点上也有事件，原生事件在button摁扭上，合成事件绑定在document上

经过验证，我们可以看到所有的事件根据不同的事件类型都绑定在了 document 上，触发函数统一是 dispatchEvent。

浏览器的执行机制

如果一个节点上同时绑定了合成和原生事件，那么禁止冒泡后执行关系是怎样的呢？
因为合成事件的触发是基于浏览器的事件机制来实现的，浏览器事件的执行需要经过三个阶段，捕获阶段-目标元素阶段-冒泡阶段。节点上的原生事件的执行是在目标阶段，然而合成事件的执行是在冒泡阶段，所以原生事件会先于合成事件执行，然后再往父节点冒泡。通过冒泡机制冒泡到最顶层元素，然后再由 dispatchEvent统一去处理。既然原生都阻止冒泡了，那合成就不会继续执行了

得出的结论：

• 原生事件阻止冒泡肯定会阻止合成事件的触发和执行。
• 合成事件的阻止冒泡不会影响原生事件触发和执行。

小tip：两者最好不要混合使用，避免出现一些奇怪的问题

react 自己做这么多的意义是什么？

• 减少内存消耗，提升性能，不需要注册那么多的事件了，一种事件类型只在 document 上注册一次
• 统一规范，解决 ie 事件兼容问题，简化事件逻辑
• 对开发者友好