位置：首页-资讯-后端开发

react事件和原生事件有哪些区别

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

这篇文章主要介绍了react事件和原生事件有哪些区别的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇react事件和原生事件有哪些区别文章都会有所收获，下面我们一起来看看吧。

react事件和原生事件的区别是：react中的事件是绑定到document上面；而原生的事件是绑定到dom上面。相对绑定的地方来说，dom上的事件要优先于document上的事件执行，react的事件对象是合成对象，不是原生的。

本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。

react事件和原生事件有什么区别

react中的事件是绑定到document上面的，

而原生的事件是绑定到dom上面的，

因此相对绑定的地方来说，dom上的事件要优先于document上的事件执行

什么是事件？

首先说JS就是为了实现一些动态的操作，而用户会有时候想去实现一些功能，如提交表单，鼠标点击等，就要在浏览器中触发这个事件，然后浏览器会感知（或者说捕获）到用户的这个行为，就会去响应处理这个事件。这个就称之为事件。

什么是事件对象？

系统在调用处理程序时，把事件会发生的一切信息，都封装成一个对象，然后作为一个参数传递给事件处理程序，而这个对象就是事件对象。在原生的函数中，经常会看见一个event的东西，而这个东西就是我们说的事件对象。

react在事件处理上具有如下优点：

几乎所有的事件都代理（delegate）到document，达到性能优化的目的
对于每种类型的事件，统一使用拥分发函数（dispatchEven）分发事件
事件对象（event）是合成对象（syntheticEvent），不是原生的

React合成事件

为什么会抽象为合成事件？

如果把所有的事件处理函数都绑定在DOM上，那么在页面响应的时候就会收到影响，导致页面很慢。react为了避免这类DOM事件的滥用，同时屏蔽底层之间不同浏览器事件的系统差异，实现了一个中间层- syntheticEvent

原理

在react中，如果需要绑定事件，一般都会这会在JSX中这么写：

<div onClick={this.onClick}>我是react点击事件</div>

但是在react中，并不是把该click事件真实的绑定在div的DOM上，而是绑定在了DOCUMENT上，当事件发生并且通过冒泡的方式冒泡至document时，react才会将事件的内容交给相对应的函数去处理

如何在react中使用原生事件

虽然react几乎封装了所有的原生事件，但诸如：

Modal开启以后，点击其他空白区域需要关闭Modal

引入一些以原生事件实现的第三方库，并且相互之间需要有交互

等等场景时，不得不使用原生事件来进行业务逻辑处理。

由于原生事件需要绑定在真实的DOM上，所以一般在compoentdidmout/ref函数执行阶段进行绑定。

class Demo extends Domponent {
    componentDidMount () {
        const parentDom = ReactDom.findDOMNode(this)
        const childDom = parentDom.queneSelector('.button');
        childDom.addEventListen('click',this.onDomClick, false)
    }
    
    onDOMClick = (e) => {
        
    }
    render () {
        return <div>demo</div>
    }
}

原生事件和合成事件的混合使用

如果在业务场景中，需要混合使用原生事件和合成事件，那么在使用的过程中，需要注意如下几点：

响应的顺序

class Demo extends Domponent {
    componentDidMount () {
        const parentDom = ReactDom.findDOMNode(this)
        const childDom = parentDom.queneSelector('.button');
        childDom.addEventListen('click',this.onDomClick, false)
    }
    
    onDOMClick = (e) => {
        console.log('dom event!')
    }
    onReactClick = (e) => {
        console.log('react event!')
    }   
    render () {
        return <div onClick={this.onReactClick}>demo</div>
    }
}

结果输出：