React 事件和 Dom 事件的区别

function App() {
  const onClickButton = (event) => {
        console.log('合成事件:', e)
    console.log('currentTarget:', e.currentTarget)
    console.log('target:', e.target)
    console.log('原生事件:', e.nativeEvent)
    console.log('currentTarget:', e.nativeEvent.currentTarget)
    console.log('target:', e.nativeEvent.target)
  }
  return (
    
); }

这里面的 event 不是原生事件,而是合成事件 SyntheticEvent

React 事件和 Dom 事件的区别_第1张图片

原生事件要使用 event.nativeEvent

原生事件是被挂在到 document 上的,所以 currentTarget 获取到的是 document

React 事件和 Dom 事件的区别_第2张图片

虽然 SyntheticEventreact 模拟的,但 Dom 具有的能力,它都有,只是这些能力不受 Dom 控制。比如:阻止默认行为 preventDefault ,阻止冒泡 stopPropagation

你可能感兴趣的:(react.js)