這篇文章主要介紹了react事件和原生事件有哪些區別的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇react事件和原生事件有哪些區別文章都會有所收獲，下面我們一起來看看吧。

創新互聯公司自2013年起，是專業互聯網技術服務公司，擁有項目成都網站制作、成都做網站網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元龍泉做網站,已為上家服務,為龍泉各地企業和個人服務,聯系電話:18982081108

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>
    }
}

結果輸出：

dom event! react event!

原因分析：首先我們知道原生事件是綁定在DOM上面的，而合成事件是綁定在document上面的，因此DOM上面的事件先被冒泡，則先執行，然后再冒泡到document，合成事件才被執行

關于“react事件和原生事件有哪些區別”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“react事件和原生事件有哪些區別”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道。

網站名稱：react事件和原生事件有哪些區別
本文路徑：http://www.yijiale78.com/article36/gddisg.html

成都網站建設公司_創新互聯，為您提供定制開發、品牌網站制作、、做網站、電子商務、用戶體驗

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯