前言
上篇文章我们了解了React合成事件跟原生绑定事件是有区别的，本篇文章从源码来深挖一下React的事件机制。
TL;DR :
- react事件机制分为两个部分：1、事件注册 2、事件分发
- 事件注册部分，所有的事件都会注册到document上，拥有统一的回调函数dispatchEvent来执行事件分发
- 事件分发部分，首先生成合成事件，注意同一种事件类型只能生成一个合成事件Event，如onclick这个类型的事件，dom上所有带有通过jsx绑定的onClick的回调函数都会按顺序（冒泡或者捕获）会放到Event._dispatchListeners 这个数组里，后面依次执行它。
还是使用上次的栗子：
@H_502_16@class ExampleApplication extends React.Component { componentDidMount() { document.addEventListener('click',() => { alert('document click'); }) } outClick(e) { console.log(e.currentTarget); alert('outClick'); } onClick(e) { console.log(e.currentTarget); alert('onClick'); e.stopPropagation(); } render() { return <div onClick={this.outClick}> <button onClick={this.onClick}> 测试click事件 </button> </div> } }分析源码之前，有些工作和知识要提前准备，普及一下：
- 请各位准备好一个编辑器，自行用react-starter-kit建一个react项目，复制上面的代码，渲染上面的组件，然后打开控制台
- 下图是整个事件机制的流程图，后面会分部分解析
https://www.processon.com/dia... - 普及几个功能函数，提前了解它的作用
React事件机制
React事件机制分为两块：
- 事件注册
- 事件分发
我们一步步来看：
事件注册
整个过程从ReactDomComponent开始，重点在enqueuePutListener,这个函数做了三件事情，详细请参考下面源码：
ReactDomComponent.js
@H_502_16@function enqueuePutListener () { // 省略部分代码 ... // 1、*重要：在这里取出button所在的document* var doc = isDocumentFragment ? containerInfo._node : containerInfo._ownerDocument; // 2、在document上注册事件，同一个事件类型只会被注册一次 listenTo(registrationName,doc); // 3、mountReady之后将回调函数存在ListernBank中 transaction.getReactMountReady().enqueue(putListener,{ inst: inst,registrationName: registrationName,listener: listener }); }接下来看看第二步：在document上注册事件 的过程，流程图如下：
ReactBrowserEventEmitter.js
@H_502_16@listenTo: function (registrationName,contentDocumentHandle) { var mountAt = contentDocumentHandle; // 检测document上是否已经监听onClick事件，所以前面说同一类型事件只会绑定一次 var isListening = getListeningForDocument(mountAt); // 获得dependency，将onClick 转成topClick,这只是一种处理方式不用纠结 var dependencies = EventPluginRegistry.registrationNameDependencies[registrationName]; // 中间是对各种事件类型给document绑定捕获事件或者冒泡事件，大部分都是冒泡， ... // 这里我们的topClick,绑定的是冒泡事件 else if (topEventMapping.hasOwnProperty(dependency)) { // trapBubbledEvent会在下面分析 ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(dependency,topEventMapping[dependency],mountAt); } // 最后把topClick标记为已注册过，防止重复注册 isListening[dependency] = true; }由于onclick绑定的是冒泡事件，所以我们来看看trapBubbledEvent
ReactEventListener.js
@H_502_16@// 输入： topClick,click,doc trapBubbledEvent: function (topLevelType,handlerBaseName,element) { if (!element) { return null; } // EventListener 要做的事情就是把事件绑定到document上，注意这里无论是注册冒泡还是捕获事件，最终的回调函数都是dispatchEvent return EventListener.listen(element,ReactEventListener.dispatchEvent.bind(null,topLevelType)); },// EventListener.js // 输入doc,dispatchEvent // 这个函数其实就是我们熟悉的兼容浏IE浏览器事件绑定的方法 listen: function listen(target,eventType,callback) { if (target.addEventListener) { target.addEventListener(eventType,callback,false); return { remove: function remove() { target.removeEventListener(eventType,false); } }; } else if (target.attachEvent) { target.attachEvent('on' + eventType,callback); return { remove: function remove() { target.detachEvent('on' + eventType,callback); } }; } }, 注意这里无论是注册冒泡还是捕获事件，最终的回调函数都是dispatchEvent，所以我们来看看dispatchEvent怎么处理事件分发。
dispatchEvent
看到这里大家会奇怪，所有的事件的回调函数都是dispatchEvent来处理，那事件onClick原来的回调函数存到哪里去了呢？
再回来看事件注册的第三步：mountReady之后将回调函数存在ListernBank中
ReactDomComponent.js
@H_502_16@function enqueuePutListener () { // 省略部分代码 ... // 1、*重要：在这里取出button所在的document* var doc = isDocumentFragment ? containerInfo._node : containerInfo._ownerDocument; // 2、在document上注册事件，同一个事件类型只会被注册一次 listenTo(registrationName,listener: listener }); }在document上注册完所有的事件之后，还需要把listener 放到listenerBank中以listenerBank[registrationName][key] 这样的形式存起来，然后在dispatchEvent里面使用。
将listener放到listenerBank中储存的过程如下：
ReactDomComponent.js
@H_502_16@// 在putListener里存入listener function putListener() { var listenerToPut = this; // 先put的是外层的listener - outClick,所以这里的inst是外层div // registrationName是onclick，listener是outClick EventPluginHub.putListener(listenerToPut.inst,listenerToPut.registrationName,listenerToPut.listener); }EventPluginHub.js
@H_502_16@/** * Stores `listener` at `listenerBank[registrationName][key]`. Is idempotent. * * @param {object} inst The instance,which is the source of events. * @param {string} registrationName Name of listener (e.g. `onClick`). * @param {function} listener The callback to store. */ putListener: function (inst,registrationName,listener) { var key = getDictionaryKey(inst); // 先根据inst得到唯一的key var bankForRegistrationName = listenerBank[registrationName] || (listenerBank[registrationName] = {}); // 可以看到最终listener 在 listenerBank里，最终以listenerBank[registrationName][key] 存在 bankForRegistrationName[key] = listener; var PluginModule = EventPluginRegistry.registrationNameModules[registrationName]; if (PluginModule && PluginModule.didPutListener) { // 这里的didPutListener只是为了兼容手机safari对non-interactive元素 // 双击响应不正确，详情可以参考这篇[文章][7] //https://www.quirksmode.org/blog/archives/2010/09/click_event_del.html PluginModule.didPutListener(inst,listener); } },以上就是事件注册的过程，接下来在看dispatchEvent如何处理事件分发。
事件分发
在介绍事件分发之前，有必要先介绍一下生成合成事件的过程，链接是https://segmentfault.com/a/11...
了解合成事件生成的过程之后，我们需要get一个点：合成事件收集了一波同类型（例如click）的回调函数存在了合成事件event._dispatchListeners这个数组里，然后将它们事件对应的虚拟dom节点放到_dispatchInstances 就本例来说，_dispatchListeners= [onClick,outClick]，之后在一起执行。
接下来看看事件分发的过程：
EventListener.js
@H_502_16@dispatchEvent: function (topLevelType,nativeEvent) { if (!ReactEventListener._enabled) { return; } // 这里得到TopLevelCallbackBookKeeping的实例对象，本例中第一次触发dispatchEvent时 // bookKeeping = {ancestors: []，nativeEvent，‘topClick’} var bookKeeping = TopLevelCallbackBookKeeping.getPooled(topLevelType,nativeEvent); try { // Event queue being processed in the same cycle allows // `preventDefault`. // 接着执行handleTopLevelImpl(bookKeeping) ReactUpdates.batchedUpdates(handleTopLevelImpl,bookKeeping); } finally { TopLevelCallbackBookKeeping.release(bookKeeping); } } function handleTopLevelImpl(bookKeeping) { var nativeEventTarget = getEventTarget(bookKeeping.nativeEvent); // 获取当前事件的虚拟dom元素 var targetInst = ReactDOMComponentTree.getClosestInstanceFromNode(nativeEventTarget); var ancestor = targetInst; do { bookKeeping.ancestors.push(ancestor); ancestor = ancestor && findParent(ancestor); } while (ancestor); for (var i = 0; i < bookKeeping.ancestors.length; i++) { targetInst = bookKeeping.ancestors[i]; // 这里的_handleTopLevel 对应的就是ReactEventEmitterMixin.js里的handleTopLevel ReactEventListener._handleTopLevel(bookKeeping.topLevelType,targetInst,bookKeeping.nativeEvent,getEventTarget(bookKeeping.nativeEvent)); } } // 这里的findParent曾经给我带来误导，我以为去找当前元素所有的父节点，但其实不是的， // 我们知道一般情况下，我们的组件最后会被包裹在<div id='root'></div>的标签里 // 一般是没有组件再去嵌套它的，所以通常返回null /** * Find the deepest React component completely containing the root of the * passed-in instance (for use when entire React trees are nested within each * other). If React trees are not nested,returns null. */ function findParent(inst) { while (inst._hostParent) { inst = inst._hostParent; } var rootNode = ReactDOMComponentTree.getNodeFromInstance(inst); var container = rootNode.parentNode; return ReactDOMComponentTree.getClosestInstanceFromNode(container); }上面这段代码的重点就是_handleTopLevel,它可以获取合成事件，并且去执行它。
下面看看具体是如何执行：
ReactEventEmitterMixin.js
@H_502_16@function runEventQueueInBatch(events) { // 1、先将事件放进队列里 EventPluginHub.enqueueEvents(events); // 2、执行它 EventPluginHub.processEventQueue(false); } var ReactEventEmitterMixin = { /** * Streams a fired top-level event to `EventPluginHub` where plugins have the * opportunity to create `ReactEvent`s to be dispatched. */ handleTopLevel: function (topLevelType,nativeEvent,nativeEventTarget) { // 用EventPluginHub生成合成事件 var events = EventPluginHub.extractEvents(topLevelType,nativeEventTarget); // 执行合成事件 runEventQueueInBatch(events); } };执行的过程分成两步：
- 将事件放进队列
- 执行
执行的细节如下：
EventPluginHub.js
@H_502_16@var executeDispatchesAndReleaseTopLevel = function (e) { return executeDispatchesAndRelease(e,false); }; var executeDispatchesAndRelease = function (event,simulated) { if (event) { // 在这里dispatch事件 EventPluginUtils.executeDispatchesInOrder(event,simulated); // 释放事件 if (!event.isPersistent()) { event.constructor.release(event); } } }; enqueueEvents: function (events) { if (events) { eventQueue = accumulateInto(eventQueue,events); } },/** * Dispatches all synthetic events on the event queue. * * @internal */ processEventQueue: function (simulated) { // Set `eventQueue` to null before processing it so that we can tell if more // events get enqueued while processing. var processingEventQueue = eventQueue; eventQueue = null; if (simulated) { forEachAccumulated(processingEventQueue,executeDispatchesAndReleaseSimulated); } else { forEachAccumulated(processingEventQueue,executeDispatchesAndReleaseTopLevel); } // This would be a good time to rethrow if any of the event fexers threw. ReactErrorUtils.rethrowCaughtError(); },上段代码里，我们最终会走到
forEachAccumulated(processingEventQueue,executeDispatchesAndReleaseTopLevel);
forEachAccumulated这个函数我们之前讲过，就是对数组processingEventQueue的每一个合成事件都使用executeDispatchesAndReleaseTopLevel来dispatch 事件。
所以各位同学们，注意到这里我们已经走到最核心的部分，dispatch 合成事件了，下面看看dispatch的详细过程：
EventPluginUtils.js
@H_502_16@/** * Standard/simple iteration through an event's collected dispatches. */ function executeDispatchesInOrder(event,simulated) { var dispatchListeners = event._dispatchListeners; var dispatchInstances = event._dispatchInstances; if (Array.isArray(dispatchListeners)) { for (var i = 0; i < dispatchListeners.length; i++) { // 由这里可以看出，合成事件的stopPropagation只能阻止react合成事件的冒泡， // 因为event._dispatchListeners 只记录了由jsx绑定的绑定的事件，对于原生绑定的是没有记录的 if (event.isPropagationStopped()) { break; } // Listeners and Instances are two parallel arrays that are always in sync. executeDispatch(event,simulated,dispatchListeners[i],dispatchInstances[i]); } } else if (dispatchListeners) { executeDispatch(event,dispatchListeners,dispatchInstances); } event._dispatchListeners = null; event._dispatchInstances = null; }由上面的函数可知，dispatch 合成事件分为两个步骤：
- 通过_dispatchListeners里得到所有绑定的回调函数，在通过_dispatchInstances的绑定回调函数的虚拟dom元素
- 循环执行_dispatchListeners里所有的回调函数，这里有一个特殊情况，也是react阻止冒泡的原理
当回调函数里使用了stopPropagation会使得数组后面的回调函数不能执行，这样就做到了阻止事件冒泡
目前还是还有看到执行事件的代码，在接着看：
EventPluginHub.js
@H_502_16@function executeDispatch(event,listener,inst) { var type = event.type || 'unknown-event'; // 注意这里将事件对应的dom元素绑定到了currentTarget上 event.currentTarget = EventPluginUtils.getNodeFromInstance(inst); if (simulated) { ReactErrorUtils.invokeGuardedCallbackWithCatch(type,event); } else { // 一般都是非模拟的情况，执行invokeGuardedCallback ReactErrorUtils.invokeGuardedCallback(type,event); } event.currentTarget = null; }上面这个函数最重要的功能就是将事件对应的dom元素绑定到了currentTarget上，
这样我们通过e.currentTarget就可以找到绑定事件的原生dom元素。
下面就是整个执行过程的尾声了：
ReactErrorUtils.js
@H_502_16@var fakeNode = document.createElement('react'); ReactErrorUtils.invokeGuardedCallback = function (name,func,a) { var boundFunc = function () { func(a); }; var evtType = 'react-' + name; fakeNode.addEventListener(evtType,boundFunc,false); var evt = document.createEvent('Event'); evt.initEvent(evtType,false,false); fakeNode.dispatchEvent(evt); fakeNode.removeEventListener(evtType,false); };由invokeGuardedCallback可知，最后react调用了faked元素的dispatchEvent方法来触发事件，并且触发完毕之后立即移除监听事件。
总的来说，整个click事件被分发的过程就是：
1、用EventPluginHub生成合成事件，这里注意同一事件类型只会生成一个合成事件，里面的_dispatchListeners里储存了同一事件类型的所有回调函数
2、按顺序去执行它
就辣么简单！
本文比较长，有不理解的欢迎提问~ 或者有理解错误的也请大家指正。
最后附上整个流程图文件：
s://segmentfault.com/a/1190000013343819
