浅谈JS事件机制与React事件机制

在JavaScript中，事件的触发实质上是要通过三个阶段:

• 首先事件捕获阶段：事件由父元素一直传递到事件发生的元素
• 执行目标对象自己的事件处理
• 而后事件冒泡：事件从子元素向父元素冒泡

正由于事件在DOM的传递经历这样过程，为行为委托提供了可能，即行为委托的实质就是将子元素事件的处理委托给父级元素处理。

• React事件并无原生的绑定在真实的DOM上，而是使用了行为委托方式实现事件机制，将事件最终都委托到最外层document，统一监听，在冒泡阶段处理，当挂载或者卸载组件时，在统一的事件监听位置增长或者删除对象。
• React并无使用原生的浏览器事件，而是在基于Virtual DOM的基础上实现了合成事件(SyntheticEvent)，事件处理程序接收到的是SyntheticEvent的实例。
• SyntheticEvent彻底符合W3C的标准，所以在事件层次上具备浏览器兼容性，与原生的浏览器事件同样拥有一样的接口，能够经过stopPropagation()和preventDefault()相应的中断。若是须要访问当原生的事件对象，能够经过引用nativeEvent得到。

另外注意不要将React事件和DOM原生事件混用，譬如常见的sidebar的点击外部即隐藏的实现，阻止事件冒泡时，就要在真实DOM层面中去stopPropagation：

componentDidMount() {
  // 点击body后隐藏sidebar
  document.body.addEventListener('click', e => {
    this.setState({
      showSidebar: false,
    });
  });
  
  // 点击sidebar自己时，阻止click事件冒泡到body，则sidebar不会隐藏
  document.querySelector('.sidebar').addEventListener('click', e => {
    e.stopPropagation();
  })
}

componentWillUnmount() {
  document.body.removeEventListener('click');
  document.querySelector('.sidebar').removeEventListener('click');
}
复制代码

或者经过原生事件对象中的target进行条件判断:

componentDidMount() {
  document.body.addEventListener('click', e => {
    if (e.target && e.target.matches('div.sidebar')) {
      return;
    }
    
    this.setState({
      showSidebar: false,
    });
  });
}
复制代码