React的合成事件
合成事件
- 所有事件掛載到document上
- event 不是原生的, 是 SyntheticEvent 合成事件物件
- 和Vue事件不同,和DOM事件也不同
event.preventDefault() => 阻止預設行為
event.stopPropagation() => 阻止冒泡
原生事件在 event.nativeEvent
DOM: div =(事件冒泡到頂層)=> document =>
合成事件層(例項化完成統一的react event):
Synthetic Event => Event =>
事件處理函式: handler
為什麼要合成事件機制?
- 更好的相容性和跨平臺
- 掛在到document, 減少記憶體消耗,避免頻繁解綁
- 方便事件的統一管理(事務機制)
相關文章
- React中的合成事件React事件
- React合成事件和DOM原生事件混用須知React事件
- React 事件和 Dom 事件React事件
- react 中的blur事件React事件
- React元件的DidMount事件裡的setState事件React元件事件
- 【React深入】React事件機制React事件
- React事件繫結的方式React事件
- React專題：事件React事件
- React事件處理React事件
- react事件機制React事件
- React中的state，事件及SetSateReact事件
- react js學習手記：react 事件ReactJS事件
- react之事件處理React事件
- React 中常用的事件處理方式React事件
- react開發教程（七）React事件系統React事件
- React事件優雅繫結React事件
- React事件傳遞引數React事件
- React事件傳參深度理解React事件
- 淺談JS事件機制與React事件機制JS事件React
- React事件與普通HTML事件有什麼區別React事件HTML
- React應該如何優雅的繫結事件？React事件
- 優雅的在React元件中註冊事件React元件事件
- React元件的狀態及生命週期事件React元件事件
- React 深入系列5：事件處理React事件
- React 進階（四）事件詳解React事件
- 玩轉 React（六）- 處理事件React事件
- React原始碼分析 – 事件機制React原始碼事件
- react常見幾種事件宣告React事件
- React原始碼分析 - 事件機制React原始碼事件
- 如何觸發react input change事件React事件
- react學習（三）- 事件系統React事件
- React table 表單裡的內容點選事件React事件
- 深入理解React：事件機制原理React事件
- React學習筆記-事件處理React筆記事件
- 淺析React之事件系統（二）React事件
- React原始碼解析(四):事件系統React原始碼事件
- compositionEvent組合事件，來填補React input輸入框onchange事件的坑事件React
- 60行程式碼實現React的事件系統行程React事件