React 事件系统

为什么 React 要写一套自己的事件系统？

1. 对于不同浏览器，对于事件存在不同的兼容新，React 事件系统可以屏蔽这些差异。
2. React v17之前 React 事件都是绑定在 document 上，v17 之后把事件绑定在对应的容器 container 上， 将事件绑定在同一容器统一管理，防止很多事件直接绑定在原生 DOM 元素上造成一些不可控的情况，由于不是绑定在真实 DOM 上， 所以 React 需要模拟一套事件流：事件捕获 => 事件源 => 事件冒泡，也包括重写事件源对象 event。

事件冒泡和事件捕获

• 冒泡阶段：在 React 中绑定的事件如 onClick，onChange，默认会在模拟冒泡阶段执行。
• 捕获阶段：如果想要在捕获阶段执行可以将事件后加上 Capture 后缀，如：onClickCapture，onChangeCapture。

exports default function App() {
  const handleClick = () => {
    console.log('模拟冒泡')
  }
  
  const handleClickCapture = () => {
    console.log('模拟捕获')
  }
  
  return (
    <div>
      <button onClick={ handleClick } onClickCapture={ handleClickCapture }>
        按钮
      </button>
    </div>
  )
}

React 中如果想要阻止事件向上冒泡，可以用 e.stopPropagation()

exports default function App() {
  const handleClick = (e) => {
    e.stopPropagation();
  }
  
  const handleFatherClick = () => {
    console.log('父元素点击事件')
  }
  
  return (
    <div onClick={ handleFatherClick }>
      <div onClick={ handleClick }>按钮</div>
    </div>
  )
}

在原生事件中 e.preventDefault() 和 return false 可以用来阻止事件默认行为， 由于在 React 中给元素的事件并不是真正的事件处理函数，导致 return false 在 React 中无法阻止事件默认行为， 如果想要阻止事件默认行为，可以使用 e.preventDefault()。