# React 事件系统原理

https://mp.weixin.qq.com/s/mkus1HCB1B6sQ4utb5i39w (opens new window)

React 合成事件是 React 模拟原生 DOM 事件所有能力的一个对象，它根据 W3C规范来定义合成事件，兼容所有浏览器，**拥有与浏览器原生事件相同的接口

SyntheticEvent 实例将被传递给你的事件处理函数，它是浏览器的原生事件的跨浏览器包装器。除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。

分别打印出合成事件对象e和原生对象e.nativeEvent

# React 事件系统架构

# 我们可以将react系统分成注册和执行两部分去理解：

# 一、注册：

// 
function enqueuePutListener(inst, registrationName, listener, transaction) {
    ...
  1. 找到document
  var isDocumentFragment = containerInfo._node && containerInfo._node.nodeType === DOC_FRAGMENT_TYPE;
  2. 注册事件，将事件注册到document上
  var doc = isDocumentFragment ? containerInfo._node : containerInfo._ownerDocument;
  3. 存储事件,放入事务队列中
  listenTo(registrationName, doc);
}

react事件系统内部对事件在不同浏览器上的执行做了兼容因此无需使用者考虑浏览器相关情况：

  listen: function listen(target, eventType, callback) {
    if (target.addEventListener) {
      将原生事件添加到target这个dom上,也就是上边传递的document上
      这就是只有document这个DOM节点上有原生事件的原因
      target.addEventListener(eventType, callback, false);
      ...
    } else if (target.attachEvent) {
      target.attachEvent('on' + eventType, callback);
      ...
    }
  }

# 二、执行：

# 事件分发dispatchEvent（react合成事件的冒泡机制）

function handleTopLevelImpl(bookKeeping) {
  1. 找到事件触发的DOM和React Component
  var nativeEventTarget = getEventTarget(bookKeeping.nativeEvent);
  var targetInst = ReactDOMComponentTree.getClosestInstanceFromNode(nativeEventTarget);

  2. 执行事件回调前,先由当前组件向上遍历它的所有父组件。
  得到ancestors这个数组，这个数组同时也是冒泡顺序。
  var ancestor = targetInst;
  do {
    bookKeeping.ancestors.push(ancestor);
    ancestor = ancestor && findParent(ancestor);
  } while (ancestor);

  这个顺序就是冒泡的顺序,并且我们发现不能通过stopPropagation来阻止'冒泡'。
  for (var i = 0; i < bookKeeping.ancestors.length; i++) {
    targetInst = bookKeeping.ancestors[i];
    ReactEventListener._handleTopLevel(bookKeeping.topLevelType, targetInst, bookKeeping.nativeEvent, getEventTarget(bookKeeping.nativeEvent));
  }
}

# handleTopLevel 构造合成事件并执行（依赖EventPluginHub）

1. 初始化时将eventPlugin注册到EventPluginHub中，不同plugin分别构造不同类型的合成事件
  ReactInjection.EventPluginHub.injectEventPluginsByName({
    ...不同插件
  });
  
2. 将事件放入事件池：
   EventPluginHub.enqueueEvents(events);
3. 再处理队列中的事件,包括之前未处理完的：
   EventPluginHub.processEventQueue(false);