什么是 React 合成事件

React 阻止事件冒泡，需要先了解合成事件和原生事件

react事件：react有自己的一套事件处理机制，它将所有事件都绑定在document上，然后再用dispatchEvent来分发，这时候分发的就是合成事件，通过这种处理，减少了事件注册的次数，另外react还在事件合成过程中，对不同浏览器的事件进行了封装处理，抹平浏览器之间的事件差异。

合成事件：在 jsx 中直接绑定的事件，就是合成事件；
原生事件：通过js原生代码绑定的事件，就是原生事件；

对合成事件的理解

是对原生事件的封装

react会根据原生事件类型来使用不同的合成事件对象，比如: 聚焦合成事件对象SyntheticFoucsEvent（合成事件对象：SyntheticEvent是react合成事件的基类，定义了合成事件的基础公共属性和方法。合成事件对象就是在该基类上创建的）

不同浏览器事件兼容的处理

在对事件进行合成时，react针对不同的浏览器，也进行了事件的兼容处理

React 事件机制流程分析

事件注册

在组件挂载阶段，根据组件内声明的事件类型-onclick，onchange 等，给 document 上添加事件 -addEventListener，并指定统一的事件处理程序 dispatchEvent。

事件存储

完成事件注册后，将react dom ，事件类型，事件处理函数fn放入数组存储，组件挂载完成后，经过遍历把事件处理函数存储到 listenerBank(一个对象)中，缓存起来，为了在触发事件的时候可以查找到对应的事件处理方法去执行。

开始事件的存储，在react 里所有事件的触发都是通过 dispatchEvent方法统一进行派发的，而不是在注册的时候直接注册声明的回调，来看下如何存储的。 react 把所有的事件和事件类型以及react 组件进行关联，把这个关系保存在了一个map里，也就是一个对象里（键值对），然后在事件触发的时候去根据当前的组件id和事件类型查找到对应的事件函数

事件执行
进入统一的事件分发函数(dispatchEvent)
结合原生事件找到当前节点对应的ReactDOMComponent对象
开始事件的合成

根据当前事件类型生成指定的合成对象

封装原生事件和冒泡机制

在 listenerBank事件池中查找事件回调并合成到 event(合成事件结束)

处理合成事件内的回调事件（事件触发完成 end）

合成事件、原生事件之间的冒泡执行关系

结论：

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

原因：

浏览器事件的执行需要经过三个阶段，捕获阶段-目标元素阶段-冒泡阶段。
节点上的原生事件的执行是在目标阶段，然而合成事件的执行是在冒泡阶段，所以原生事件会先合成事件执行，然后再往父节点冒泡，所以原生事件阻止冒泡会阻止合成事件的触发，而合成事件的阻止冒泡不会影响原生事件。

一般情况下正常使用阻止事件冒泡及默认行为

e.preventDefault(); e.stopPropagation();

import { Component } from 'react';
interface isState {
    count: number;
}
class App extends Component<any, isState> {
    constructor(props: any) {
        super(props)
        this.state = {
            count: 100
        }
    }
    // 阻止事件默认行为
    addCount = (e: any) => {
        e.preventDefault();
        this.setState({
            count: this.state.count + 1
            // count: this.state.count 注意不能这样使用，因为不能直接赋值
        })
    }
    sayDiv = () => {
        console.log("this is div");
    }
    // 阻止事件默认行为，并阻止事件冒泡
    sayA = (e: any) => {
        console.log("this is A");
        e.preventDefault();
        e.stopPropagation();
        // e.nativeEvent.stopImmediatePropagation();
    }
    // 阻止事件冒泡行为
    render() {
        return (
            <div>
                <h2>当前计数器值：{this.state.count}</h2>
                {/* 普通事件阻止默认行为 */}
                <a href="https://baidu.cn" onClick={e => this.addCount(e)}>
                    增加
                </a>
                {/* 没有涉及到原生事件注册只有react事件时使用 */}
                <div onClick={this.sayDiv}>
                    <a href="https://baidu.cn" onClick={e => this.sayA(e)}>
                        点我看看
                    </a>
                </div>
            </div>
        );
    }
}
export default App;

React 合成事件详解

什么是 React 合成事件

对合成事件的理解

React 事件机制流程分析

合成事件、原生事件之间的冒泡执行关系

一般情况下正常使用阻止事件冒泡及默认行为

猜你喜欢