React 事件绑定原理
一、react并没有使用原生的浏览器事件,而是在基于Virtual
DOM的基础上实现了合成事件,采用小驼峰命名法,默认的事件传播方式是冒泡,如果想改为捕获的话,
直接在事件名后面加上Capture即可;事件对象event也不是原生事件对象,而是合成对象,但通过nativeEvent属性可以访问原生事件对象;
二、react合成事件主要分为以下三个过程:
1、事件注册
在该阶段主要做了两件事:document上注册、存储事件回调。所有事件都会注册到document上,
拥有统一的回调函数dispatchEvent来执行事件分发,类似于document.addEventListener("click",dispatchEvent)。
register:
addEventListener-click
addEventListener-change
listenerBank:
{
click: {key1: fn1, key2: fn2},
change: {key1: fn3, key3: fn4}
}
2、事件合成
事件触发后,会执行一下过程:
(1)进入统一的事件分发函数dispatchEvent;
(2)找到触发事件的 ReactDOMComponent;
(3)开始事件的合成;
—— 根据当前事件类型生成指定的合成对象
—— 封装原生事件和冒泡机制
—— 查找当前元素以及他所有父级
—— 在listenerBank根据key值查找事件回调并合成到 event(合成事件结束)
3、批处理
批量处理合成事件内的回调函数
Q.E.D.