1、原生Dom的事件流
image.png
如上图所示：
在JavaScript中，事件的触发实质上是要经过三个阶段:事件捕获、目标对象本身的事件处理和事件冒泡。
-
事件捕获 （由父级元素将事件一直传递到事件发生的元素）
当某个事件触发时，文档根节点最先接受到事件，然后根据DOM树结构向具体绑定事件的元素传递。该阶段为父元素截获事件提供了机会。
事件传递路径为：
window —> document —> body —> div—> text -
目标阶段
具体元素已经捕获事件后，执行目标事件本身的处理事件。 -
事件冒泡
根据DOM树结构由具体触发事件的元素向根节点传递。正因为事件在DOM的传递经历这样一个过程，从而为事件委托提供了可能。
事件传递路径：
text—> div —> body —> document —> window
2、事件委托（事件代理）
事件委托的实质就是将子元素事件的处理委托给父级元素处理。把事件监听器添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到它是哪个子元素的事件。
举个栗子：如果我们有一个列表，列表之中有大量的列表项，我们需要在点击列表项的时候响应一个事件
<body>
<div class="lists">
<div class="list-item">content1</div>
<div class="list-item">content2</div>
<div class="list-item">content3</div>
<div class="list-item">content4</div>
</div>
<script>
//1. 事件代理
// var listParentNode = document.querySelector('.lists');
// listParentNode.addEventListener('click', function(e){
// console.log(e.target);
// })
//新增一个子元素
// var newItem = document.createElement('div')
// newItem.innerHTML = 'newConent';
// newItem.setAttribute('class', 'list-item');
// listParentNode.appendChild(newItem)
//2. 给每个列表项一一绑定一个函数
var nodeLists = document.querySelectorAll('.list-item');
for(var i = 0; i < nodeLists.length; i++) {
nodeLists[i].addEventListener('click', function(e){
console.log(e.target)
})
}
//新增一个子元素
var listParentNode = document.querySelector('.lists');
var newItem = document.createElement('div')
newItem.innerHTML = 'newConent';
newItem.setAttribute('class', 'list-item');
listParentNode.appendChild(newItem)
</body>
事件委托优点：
-
减少内存的消耗
上面两种方式， 如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能；所以比较好的方法是 点击事件绑定到他的父层，然后在执行事件的时候再去匹配判断目标元素（这样用事件代理的方式绑定事件，新添加的子元素仍然可以执行事件回调函数）。 -
动态绑定事件
比如上述的例子中列表项就几个，我们给每个列表项都绑定了事件；
在很多时候，我们需要通过 AJAX 或者用户操作动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件；
如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的；
所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。
不适用的情况： 比如 focus、blur 之类的事件本身没有事件冒泡机制，所以无法委托； mousemove、mouseout这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托。
3. React事件机制
image.png
在 React事件介绍 中介绍了合成事件对象以及为什么提供合成事件对象，主要原因是因为 React 想实现一个全浏览器的框架， 为了实现这种目标就需要提供全浏览器一致性的事件系统，以此抹平不同浏览器的差异。
合成事件对象很有意思，一开始听名字会觉得很奇怪，看到英文名更奇怪 SyntheticEvent， 实际上合成事件的意思就是使用原生事件合成一个 React 事件， 例如使用原生click事件合成了onClick事件，使用原生mouseout事件合成了onMouseLeave事件，原生事件和合成事件类型大部分都是一一对应，只有涉及到兼容性问题时我们才需要使用不对应的事件合成。
合成事件是浏览器的原生事件的跨浏览器包装器。除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。
当我们在组件上设置事件处理器时，React并不会在该DOM元素上直接绑定事件处理器. React内部自定义了一套事件系统，在这个系统上统一进行事件订阅和分发。
具体来讲，React利用事件委托机制在Document上统一监听DOM事件，再根据触发的target将事件分发到具体的组件实例。另外上面e是一个合成事件对象(SyntheticEvent), 而不是原始的DOM事件对象。
React事件系统实现可以分为两个阶段：事件注册、事件触发
- 事件注册
React 的事件注册过程主要做了两件事：document 上注册、存储事件回调。
document 上注册
React在组件加载(mount)和更新(update)时, 根据传入组件内的声明的事件类型的属性（onClick、onChange 等），在 document 上注册事件（document.addEventListener('click', dispatchEvent)) 并指定统一的回调函数dispatchEvent(不处理具体的事件，仅对事件进行分发)
存储事件回调
React 为了在触发事件时可以查找到对应的回调去执行，会把组件内的所有事件统一地存放到一个对象中（listenerBank）。而存储方式如上图，首先会根据事件类型分类存储，例如 click 事件相关的统一存储在一个对象中，回调函数的存储采用键值对（key/value）的方式存储在对象中，key 是组件的唯一标识 (_rootNodeID)，value 对应的就是事件的回调函数。例如
{
click: {
key1: fn, //key 是组件的唯一标识 (_rootNodeID)
key2: fn
},
change: {
key3: fn,
key4: fn
}
}
ReactBrowserEventEmitter作为事件注册入口，担负着事件注册和事件触发。注册事件的回调函数由EventPluginHub来统一管理，根据事件的类型(type)和组件标识(_rootNodeID)为key唯一标识事件并进行存储。
-
事件触发
事件触发流程.png
其大致流程如下：
- 触发事件，开始 DOM 事件流，先后经过三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段
- 当事件冒泡到 document 时，触发统一的事件分发函数 ReactEventListener.dispatchEvent
- dispatchEvent根据原生事件对象（nativeEvent）找到当前节点（即事件触发节点）对应的 ReactDOMComponent 对象
- 事件的合成
(1) 根据当前事件类型生成对应的合成对象
(2) 封装原生事件对象和冒泡机制
(3) 查找当前元素以及它所有父级
(4)在 listenerBank 中查找事件回调函数并合成到 events 中 - 批量执行合成事件（events）内的回调函数，
- 如果没有阻止冒泡，会将继续进行 DOM 事件流的冒泡（从 document 到 window），否则结束事件触发
简单点的解释为：
React不会将事件处理函数直接绑定到真实的节点上，而是把所有的事件绑定到结构的最外层，使用一个统一的事件监听器。这个监听器维持了一个映射，保存所有组件内部的事件监听和处理函数。当事件发生时，首先被这个统一的事件监听器处理，然后在映射里找到真正的事件处理函数并调用。
需要注意的是
- React合成事件的冒泡并不是真的冒泡，而是节点的遍历。
- 并不是所有事件都会委托到document上，前面提到几乎所有的事件代理(delegate)到document，几乎说明存在例外的情况。例如对于audio、video标签，存在一些媒体事件(例如onplay、onpause)，而这些事件是document不具有的，那么只能在这些标签上进行事件绑定，绑定一个入口分发函数(dispatchEvent)。
4. React事件和原生事件有什么区别
关于合成事件
合成事件官方文档：https://react.html.cn/docs/events.html
合成事件作用
- 对原生事件封装
在事件回调方法,方法中的参数 e，其实不是原生事件对象e而是react包装过的对象，同时原生事件对象被放在了属性 e.nativeEvent内。
官网中介绍到了 SyntheticEvent是react合成事件的基类，定义了合成事件的基础公共属性和方法。react会根据当前的事件类型来使用不同的合成事件对象，比如鼠标单机事件 - SyntheticMouseEvent，焦点事件-SyntheticFocusEvent等，但是都是继承自SyntheticEvent。 - 对原生事件的升级和改造
对于有些dom元素事件，我们进行事件绑定之后，react并不是只处理你声明的事件类型，还会额外的增加一些其他的事件，帮助我们提升交互的体验。
最典型的例子就是input的onChange事件。
image.png
-
浏览器事件的兼容处理
react在给document注册事件的时候也是对兼容性做了处理。下面这个代码就是给document注册事件，内部其实也是做了对 ie浏览器的兼容做了处理。
image.png
React事件和原生事件主要区别有:
- React 组件上声明的事件没有绑定在 React 组件对应的原生 DOM 节点上。
- React 利用事件委托机制，将几乎所有事件的触发代理（delegate）在 document 节点上，事件对象(event)是合成对象(SyntheticEvent)，不是原生事件对象，但通过 nativeEvent 属性访问原生事件对象。
- 由于 React 的事件委托机制，React 组件对应的原生 DOM 节点上的事件触发时机总是在 React 组件上的事件之前。
- 原生事件阻止冒泡肯定会阻止合成事件的触发， 合成事件的阻止冒泡不会影响原生事件, 两者最好不要混合使用，避免出现一些奇怪的问题。
合成事件优点：
- 减少内存消耗，提升性能，不需要注册那么多的事件了，一种事件类型只在 document 上注册一次
- 统一规范，解决兼容问题，简化事件逻辑，事件处理程序接收到的是SyntheticEvent的实例。SyntheticEvent完全符合W3C的标准，因此在事件层次上具有浏览器兼容性。
- React打算干预事件的分发。v16引入Fiber架构，React为了优化用户的交互体验，会干预事件的分发。不同类型的事件有不同的优先级，比如高优先级的事件可以中断渲染，让用户代码可以及时响应用户交互
站在巨人的肩膀上(参考资料)
dom事件
React事件机制和未来 这个文章写得好！
网友评论