摘要：為組建的實(shí)例化對(duì)象為組件的唯一標(biāo)識(shí)為組建的實(shí)例化對(duì)象為事件名稱為我們寫的回調(diào)函數(shù)，也就是列子中的在每個(gè)中只實(shí)例化一次。

React 元素的事件處理和 DOM元素的很相似。但是有一點(diǎn)語(yǔ)法上的不同:

React事件綁定屬性的命名采用駝峰式寫法，而不是小寫。

如果采用 JSX 的語(yǔ)法你需要傳入一個(gè)函數(shù)作為事件處理函數(shù)，而不是一個(gè)字符串(DOM元素的寫法)

并且 React 自己內(nèi)部實(shí)現(xiàn)了一個(gè)合成事件，使用 React 的時(shí)候通常你不需要使用 addEventListener 為一個(gè)已創(chuàng)建的 DOM 元素添加監(jiān)聽器。你僅僅需要在這個(gè)元素初始渲染的時(shí)候提供一個(gè)監(jiān)聽器。

我們看一下這是怎么實(shí)現(xiàn)的

React 事件機(jī)制分為 事件注冊(cè)，和事件分發(fā)，兩個(gè)部分

// 事件綁定
function handleClick(e) {
    e.preventDefault();
    console.log("The link was clicked.");
}

  return (
    
      Click me
    
  );

上述代碼中， onClick 作為一個(gè) props 傳入了一個(gè) handleClick，在組件更新和掛載的時(shí)候，會(huì)對(duì)props處理， 事件綁定流程如下:

核心代碼：
在 ReactDOMComponent.js 進(jìn)行組件加載 (mountComponent)、更新 (updateComponent) 的時(shí)候，調(diào)用 _updateDOMProperties 方法對(duì) props 進(jìn)行處理:

_updateDOMProperties: function(lastProps, nextProps, transaction) {
...
if (registrationNameModules.hasOwnProperty(propKey)) {
        if (nextProp) {
          // 如果傳入的是事件，去注冊(cè)事件
          enqueuePutListener(this, propKey, nextProp, transaction);
        } else if (lastProp) {
          deleteListener(this, propKey);
        }
      } 
...
}

// 注冊(cè)事件
function enqueuePutListener(inst, registrationName, listener, transaction) {
  var containerInfo = inst._nativeContainerInfo;
  var doc = containerInfo._ownerDocument;
    ...
    // 去doc上注冊(cè)
  listenTo(registrationName, doc);
    // 事務(wù)結(jié)束之后 putListener
  transaction.getReactMountReady().enqueue(putListener, {
    inst: inst,
    registrationName: registrationName,
    listener: listener,
  });
}

看下綁定方法

listento

//registrationName:需要綁定的事件
//當(dāng)前component所屬的document，即事件需要綁定的位置
listenTo: function (registrationName, contentDocumentHandle) {
    var mountAt = contentDocumentHandle;
    //獲取當(dāng)前document上已經(jīng)綁定的事件
    var isListening = getListeningForDocument(mountAt);
    ...
      if (...) {
      //冒泡處理  
      ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(...);
      } else if (...) {
        //捕捉處理
        ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(...);
      }
      ...
  },

走到最后其實(shí)就是 doc.addEventLister(event, callback, false);

可以看出所有事件綁定在document上
所以事件觸發(fā)的都是ReactEventListener的dispatchEvent方法

react 維護(hù)了一個(gè) listenerBank 的變量保存了所有的綁定事件的回調(diào)。
回到之前注冊(cè)事件的方法

function enqueuePutListener(inst, registrationName, listener, transaction) {
  var containerInfo = inst._nativeContainerInfo;
  var doc = containerInfo._ownerDocument;
  if (!doc) {
    // Server rendering.
    return;
  }
  listenTo(registrationName, doc);
  transaction.getReactMountReady().enqueue(putListener, {
    inst: inst,
    registrationName: registrationName,
    listener: listener,
  });
}

當(dāng)綁定完成以后會(huì)執(zhí)行putListener。

var listenerBank = {};
var getDictionaryKey = function (inst) {
//inst為組建的實(shí)例化對(duì)象
//_rootNodeID為組件的唯一標(biāo)識(shí)
  return "." + inst._rootNodeID;
}
var EventPluginHub = {
//inst為組建的實(shí)例化對(duì)象
//registrationName為事件名稱
//listner為我們寫的回調(diào)函數(shù)，也就是列子中的this.autoFocus
  putListener: function (inst, registrationName, listener) {
    ...
    var key = getDictionaryKey(inst);
    var bankForRegistrationName = listenerBank[registrationName] || (listenerBank[registrationName] = {});
    bankForRegistrationName[key] = listener;
    ...
  }
}

EventPluginHub在每個(gè)React中只實(shí)例化一次。也就是說，項(xiàng)目組所有事件的回調(diào)都會(huì)儲(chǔ)存在唯一的listenerBank中。

注冊(cè)事件流程圖所示，所有的事件都是綁定在Document上?；卣{(diào)統(tǒng)一是ReactEventListener的dispatch方法。
由于冒泡機(jī)制，無(wú)論我們點(diǎn)擊哪個(gè)DOM，最后都是由document響應(yīng)（因?yàn)槠渌鸇OM根本沒有事件監(jiān)聽）。也即是說都會(huì)觸發(fā) ReactEventListener.js 里的 dispatch方法。

我們先看一下事件觸發(fā)的流程圖：

dispatchEvent: function (topLevelType, nativeEvent) {
    if (!ReactEventListener._enabled) {
      return;
    }
    // 這里得到TopLevelCallbackBookKeeping的實(shí)例對(duì)象，本例中第一次觸發(fā)dispatchEvent時(shí)
    // bookKeeping instanceof TopLevelCallbackBookKeeping
    // bookKeeping = TopLevelCallbackBookKeeping?{topLevelType: "topClick", nativeEvent: "click", ancestors: Array(0)}
    var bookKeeping = TopLevelCallbackBookKeeping.getPooled(topLevelType, nativeEvent);
    try {
      // Event queue being processed in the same cycle allows
      // `preventDefault`.
      // 接著執(zhí)行handleTopLevelImpl(bookKeeping)
      ReactUpdates.batchedUpdates(handleTopLevelImpl, bookKeeping);
    } finally {
      // 回收
      TopLevelCallbackBookKeeping.release(bookKeeping);
    }
  }

function handleTopLevelImpl(bookKeeping) {
  var nativeEventTarget = getEventTarget(bookKeeping.nativeEvent);
  // 獲取當(dāng)前事件的虛擬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 對(duì)應(yīng)的就是ReactEventEmitterMixin.js里的handleTopLevel
    ReactEventListener._handleTopLevel(bookKeeping.topLevelType, targetInst, bookKeeping.nativeEvent, getEventTarget(bookKeeping.nativeEvent));
  }
}

// 這里的findParent曾經(jīng)給我?guī)碚`導(dǎo)，我以為去找當(dāng)前元素所有的父節(jié)點(diǎn)，但其實(shí)不是的，
// 我們知道一般情況下，我們的組件最后會(huì)被包裹在
的標(biāo)簽里
// 一般是沒有組件再去嵌套它的，所以通常返回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

//這就是核心的處理了
handleTopLevel: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
    //返回合成事件
    //這里進(jìn)入了EventPluginHub，調(diào)用事件插件方法，返回合成事件，并執(zhí)行隊(duì)列里的dispatchListener
    var events = EventPluginHub.extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget);
    //執(zhí)行合成事件
    runEventQueueInBatch(events);
  }

合成事件如何生成，請(qǐng)看上方事件觸發(fā)的流程圖

runEventQueuelnBatch(events)做了兩件事

把 dispatchListener里面的事件排隊(duì)push進(jìn) eventQueue

執(zhí)行 EventPluginHub.processEventQueue(false);

執(zhí)行的細(xì)節(jié)如下：

  // 循環(huán) eventQueue調(diào)用
  var executeDispatchesAndReleaseTopLevel = function (e) {
    return executeDispatchesAndRelease(e, false);
  };
  /* 從event._dispatchListener 取出 dispatchlistener，然后dispatch事件，
   * 循環(huán)_dispatchListeners，調(diào)用executeDispatch
   */
  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();
  },
/**
 * 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合成事件的冒泡，
     // 因?yàn)閑vent._dispatchListeners 只記錄了由jsx綁定的綁定的事件，對(duì)于原生綁定的是沒有記錄的
      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, simulated, dispatchListeners, dispatchInstances);
  }
  event._dispatchListeners = null;
  event._dispatchInstances = null;
}
function executeDispatch(event, simulated, listener, inst) {
  var type = event.type || "unknown-event";
  // 注意這里將事件對(duì)應(yīng)的dom元素綁定到了currentTarget上
  event.currentTarget = EventPluginUtils.getNodeFromInstance(inst);
  if (simulated) {
    ReactErrorUtils.invokeGuardedCallbackWithCatch(type, listener, event);
  } else {
    // 一般都是非模擬的情況，執(zhí)行invokeGuardedCallback
    ReactErrorUtils.invokeGuardedCallback(type, listener, event);
  }
  event.currentTarget = null;
}

由上面的函數(shù)可知，dispatch 合成事件分為兩個(gè)步驟：

通過_dispatchListeners里得到所有綁定的回調(diào)函數(shù)，在通過_dispatchInstances的綁定回調(diào)函數(shù)的虛擬dom元素

循環(huán)執(zhí)行_dispatchListeners里所有的回調(diào)函數(shù)，這里有一個(gè)特殊情況，也是react阻止冒泡的原理

其實(shí)在 EventPluginHub.js 里主要做了兩件事情.

1.從event._dispatchListener 取出 dispatchlistener，然后dispatch事件，
循環(huán)_dispatchListeners，調(diào)用executeDispatch，然后走到ReactErrorUtils.invokeGuardedCallback;
2.釋放 event

上面這個(gè)函數(shù)最重要的功能就是將事件對(duì)應(yīng)的dom元素綁定到了currentTarget上，
這樣我們通過e.currentTarget就可以找到綁定事件的原生dom元素。

下面就是整個(gè)執(zhí)行過程的尾聲了：

ReactErrorUtils.js
var fakeNode = document.createElement("react");
ReactErrorUtils.invokeGuardedCallback = function(name, func, a, b) {
      var boundFunc = func.bind(null, a, b);
      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, boundFunc, false);
    };

由invokeGuardedCallback可知，最后react調(diào)用了faked元素的dispatchEvent方法來觸發(fā)事件，并且觸發(fā)完畢之后立即移除監(jiān)聽事件。

總的來說，整個(gè)click事件被分發(fā)的過程就是：
1、用EventPluginHub生成合成事件，這里注意同一事件類型只會(huì)生成一個(gè)合成事件，里面的_dispatchListeners里儲(chǔ)存了同一事件類型的所有回調(diào)函數(shù)

2、按順序去執(zhí)行它