浅谈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,
    });
  });
}
复制代码