React的合成事件

kyooo0發表於2020-12-28

合成事件

  1. 所有事件掛載到document上
  2. event 不是原生的, 是 SyntheticEvent 合成事件物件
  3. 和Vue事件不同,和DOM事件也不同

event.preventDefault() => 阻止預設行為
event.stopPropagation() => 阻止冒泡

原生事件在 event.nativeEvent

DOM: div =(事件冒泡到頂層)=> document =>
合成事件層(例項化完成統一的react event):
Synthetic Event => Event =>
事件處理函式: handler

為什麼要合成事件機制?

  1. 更好的相容性和跨平臺
  2. 掛在到document, 減少記憶體消耗,避免頻繁解綁
  3. 方便事件的統一管理(事務機制)

相關文章