React14-合成事件

186 阅读1分钟

1.事件监听阶段

所有的监听都会放到root上,触发时候会执行回调函数即执行dispatchIntertiveEvent

2.创建合成事件阶段

dispatchIntertiveEvent这个函数执行的时候会拿到e.target这个原生事件对象 去找dom

这个dom创建合成event对象 _targetInst = e.target这个元素

获取event然后挂载_dispatchListeners,_dispatchInstances 这两个属性 怎么挂载的呢?

从触发元素的instance往上找一条链 这条链上所有的节点去看props,然后拿到props上该事件对应的回调函数和此时的节点 加入数组

3.事件触发阶段

拿到合成event对象 拿出event里面的_dispatchListeners,_dispatchInstances

执行listeners里面的所有listen instances和listeners是一一对应关系

<div onClick={e=>{xxx}}></div>

dispatchInstances 是绑定onClick的dom 因为只有他才有对应的callback在

dispatchListeners就是dom对应的callback

所以dispatchInstances 存放的是监听的元素 不是触发的元素(e.target) 此时把e.currentTarget=instance即把currentTarget设为监听的元素。

4.流程图

image-20210514211355937