跳到主要内容

React：合成事件

· 阅读需 4 分钟

合成事件​

React有自己一套独立的事件系统，就是合成事件，它模拟原生事件所有的功能。根据W3C规范来定义合成事件，兼容了所有的浏览器，拥有和浏览器原生事件相同的接口。

在react中，可以通过e.nativeEvent获取到DOM事件，比如：<div onClick={(e)=>{console.log(e.nativeEvent)}}>点击</div>。

在这里插入图片描述

合成事件的目的是：

  1. 实现浏览器兼容，方便跨平台。react采取顶层事件机制，保证事件冒泡一致性，可以跨浏览器执行。把不同平台事件，模拟合成事件。
  2. 方便事件统一管理和事务机制。

DOM原生事件​

事件流：页面中绑定了很多的事件，而页面接收事件的顺序就是事件流。

事件传播大致分为三个阶段：

  1. 事件捕获阶段
  2. 目标阶段
  3. 事件冒泡阶段

首先，当一个事件被触发的时候，顶层对象发出一个事件流，一直流向目标节点，直到事件真正发生的目标元素；到达目标元素后，就执行目标元素该事件对应的处理逻辑；

事件冒泡就是事件从目标元素开始，往顶层元素传播，途中遇到节点绑定的事件，就会触发一次。如果需要阻止事件冒泡的话，就使用e.stopPropagation()来阻止事件冒泡。

事件代理：把响应事件委托到一个元素上，当子元素触发事件的时候，事件就向上冒泡，父节点获取到事件后，再判断是否是对应节点的事件，然后进行处理。事件代理的优点在于它可以减少内存消耗和动态绑定事件。

原生事件和合成事件区别​

  1. 事件命名方式不同，原生事件命名纯小写，react事件命名方式是小驼峰，比如onClick；
  2. 事件处理函数不一样，原生事件的处理函数为字符串，在react中，是传入一个函数作为事件处理函数；
  3. 阻止默认行为不一样，原生事件可以通过返回false来阻止事件的默认行为。在react中，需要使用preventDefault()方法来阻止事件的默认行为。

react合成事件，是以事件委托的方式绑定在组件最上层。并且在组件卸载阶段会自动销毁。

react的所有事件都是绑定在document上【react17之后，事件是绑定在root容器上】，当真实DOM元素上触发事件的时候，就会冒泡到document或者是root容器上。然后再来处理react事件；