react事件和原生事件的區別是：react中的事件是綁定到document上面；而原生的事件是綁定到dom上面。相對綁定的地方來說，dom上的事件要優先於document上的事件執行，react的事件物件是合成對象，不是原生的。
本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。
react中的事件是綁定到document上面的，#
##而原生的事件是綁定到dom上面的， 因此相對綁定的地方來說，dom上的事件要優先於document上的事件執行什麼是事件？
首先說JS就是為了實現一些動態的操作，而用戶會有時候想去實現一些功能，如提交表單，滑鼠點擊等，就要在瀏覽器中觸發這個事件，然後瀏覽器會感知（或說捕獲）到使用者的這個行為，就會去回應處理這個事件。這個就稱為事件。什麼是事件物件？
系統在呼叫處理程序時，把事件會發生的一切訊息，都封裝成一個對象，然後作為一個參數傳遞給事件處理程序，而這個物件就是事件物件。在原生的函式中，常常會看見一個event的東西，而這個東西就是我們說的事件物件。react在事件處理上具有以下優點：
React合成事件
為什麼會抽象化為合成事件？
如果把所有的事件處理函數都綁定在DOM上，那麼在頁面回應的時候就會收到影響，導致頁面很慢。 react為了避免這類DOM事件的濫用，同時屏蔽底層之間不同瀏覽器事件的系統差異，實現了一個中間層- syntheticEvent原理
在react中，如果需要綁定事件，通常都會在JSX中這麼寫：
<div onClick={this.onClick}>我是react点击事件</div>如何在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!
react視頻教程》
以上是react事件和原生事件有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！
