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

結果輸出：

dom event! react event!

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

推薦學習：《

react視頻教程》

以上是react事件和原生事件有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！