## 前言 我們都知道 React 元件繫結事件的本質是代理到 document 上，然而面試被問到，為什麼要這麼設計，有什麼好處嗎？ 我知道肯定不會是因為虛擬 DOM 的原因，因為 Vue 的事件就能掛載到真實的 DOM 節點。所以繼續往下探究吧 ## React 模擬 DOM 事件冒泡的原理 設有一段程式碼如下 ```html ``` 我們在 child 和 parent 兩個節點都掛上了 onClick 函式，並且點選 child 觸發事件，的確先輸出 child！後輸出 parent！。此刻你們或許留意到了下圖，瀏覽器的反饋是事件的確只有一個，就是掛在 document 上的。  這個事件就是 dispatchDiscreteEvent。簡言之，react 自己定了一個 event 物件，存放著 onClick 回撥們，在使用者觸發點選點選事件時，挨個檢查並執行。 ## 利弊 我們都知道事件委託的好處，可以減少 DOM 上的事件物件節省記憶體，優化頁面效能。這麼說還是抽象，舉個例子，若有一 10w 項列表，點選列表某一項要提示這一列表的某個資訊，若你使用 Vue，會在每一個 li 節點掛載事件，10w 個事件將會極大程度上拖慢你的瀏覽器效能，你可以執行下面的例子明顯感到 DOM 載入慢。 ```

• {{ item }}
let list = []; for (let i = 0; i < 1000000; i++) { list.push(i); } var app = new Vue({ el: '#app', data: { list: list, }, methods: { handleFn() { } } }) ```  解決這個問題的唯一途徑就是事件代理，只需要把事件掛載到 ul 上，並判定 event.target 來自某個 li。 react 掛載到 document 上的行為天生做了事件代理，省了你這一步操作。 但是弊端還是有的，由於 react 的機制，使得它包裝了一層，開發者沒法在冒泡階段拿到原生的事件物件，那麼就提高了學習成本。 並且在開發者“不知情”的情況下埋下了一個坑，若你在 document 上掛載自定義的事件，並且呼叫了 e.stopImmediatePropagation() 就不會再執行 react 自身繫結在 document 上的事件。見下面的例子 ```html ``` ## React 怎麼禁止事件的冒泡 設上文程式碼，點選了 child 後，只希望 child 的事件被觸發，parent 的不被觸發怎麼做？ 結論顯而易見是 stopPropagation。 ```html { console.log('child!'); e.stopPropagation() }}> ``` 然而上文我們提到過，react 提供的事件物件是它自己合成的事件物件，它的冒泡是模擬的，它的事件模型應該如下圖，下文圖片出自 [github-youngwind -React 事件代理與 stopImmediatePropagation](https://github.com/youngwind/blog/issues/107)  那麼這個 e.stopPropagation() 是什麼？ 貼上了部分原始碼，簡單解釋下，react 的合成事件裡刪除了原生事件的 stopPropagation，並自己模擬實現了一個，它標記了一下 `this.isPropagationStopped` 為 true，挨個遍歷合成事件物件裡的回撥之中，回去檢查這個屬性，為 true 則不繼續向下執行。 ```js function SyntheticEvent(dispatchConfig, targetInst, nativeEvent, nativeEventTarget) { { // these have a getter/setter for warnings delete this.nativeEvent; delete this.preventDefault; delete this.stopPropagation; delete this.isDefaultPrevented; delete this.isPropagationStopped; } // ......省略程式碼 _assign(SyntheticEvent.prototype, { preventDefault: function() { // ......省略程式碼 }, stopPropagation: function () { var event = this.nativeEvent; if (!event) { return; } if (event.stopPropagation) { event.stopPropagation(); } else if (typeof event.cancelBubble !== 'unknown') { // The ChangeEventPlugin registers a "propertychange" event for // IE. This event does not support bubbling or cancelling, and // any references to cancelBubble throw "Member not found". A // typeof check of "unknown" circumvents this issue (and is also // IE specific). event.cancelBubble = true; } this.isPropagationStopped = functionThatReturnsTrue; }, }) // ......省略程式碼 } ``` 但其實吧，我們還有另外一種方式可以組織這種冒泡，就是拿到原生事件物件呼叫 stopImmediatePropagation，如 e.nativeEvent.stopImmediatePropagation。stopImmediatePropagation 能夠阻止掛載到某個 DOM 節點上多個事件的後續執行。下文圖片出自 [github-youngwind -React 事件代理與 stopImmediatePropagation](https://github.com/youngwind/blog/issues/107)  ## 那麼來探究一下這個合成事件到底是個怎麼回事兒？ 首先 document 上掛載的是 dispatchDiscreteEvent 回撥函式 ```js function dispatchDiscreteEvent(topLevelType, eventSystemFlags, container, nativeEvent) { flushDiscreteUpdatesIfNeeded(nativeEvent.timeStamp); discreteUpdates(dispatchEvent, topLevelType, eventSystemFlags, container, nativeEvent); } ``` 上面函式代理了一堆操作，但總之接下來嘗試分發事件。 ```js function attemptToDispatchEvent(topLevelType, eventSystemFlags, container, nativeEvent) { // TODO: Warn if _enabled is false. var nativeEventTarget = getEventTarget(nativeEvent); // 這個東西就是 react 的虛擬節點 FiberNode {tag: 5, key: null, elementType: "div", type: "div", stateNode: div#child, …} var targetInst = getClosestInstanceFromNode(nativeEventTarget); // ...... 省略判斷觸發節點是否有效性 { dispatchEventForLegacyPluginEventSystem(topLevelType, eventSystemFlags, nativeEvent, targetInst); } // We're not blocked on anything. return null; } ``` 跳過兩步，執行到一個叫 executeDispatchesInOrder 的函式，就要開始按順序的觸發事件。注意函式引數 event 物件，此物件中存放了所有我們 onClick 預設的回撥函式。 ```js function executeDispatchesInOrder(event) { // event._dispatchListeners 其實就是 onClick 的回撥函式。 // (2) [ƒ, ƒ] // 0: ƒ onClick(e) // 1: ƒ onClick() var dispatchListeners = event._dispatchListeners; // event._dispatchInstances 其實就是 child 和 parent 的兩個虛擬節點 // (2) [FiberNode, FiberNode] var dispatchInstances = event._dispatchInstances; if (Array.isArray(dispatchListeners)) { // 迴圈執行回撥，除非有 e.stopPropagation() 被觸發，讓 isPropagationStopped 的標記為 true。 for (var i = 0; i < dispatchListeners.length; i++) { if (event.isPropagationStopped()) { break; } // Listeners and Instances are two parallel arrays that are always in sync. executeDispatch(event, dispatchListeners[i], dispatchInstances[i]); } } else if (dispatchListeners) { executeDispatch(event, dispatchListeners, dispatchInstances); } event._dispatchListeners = null; event._dispatchInstances = null; } ```  那麼真正執行事件並觸發回掉的過程是這樣的，創造了一個叫 react 的假節點，創造了一個事件 evt 並掛到這個節點上，手動觸發它，最後再銷燬。evt 的回掉內容就是我們的 onClick 裡的內容 ```js { // ......省略程式碼 var fakeNode = document.createElement('react'); // ......省略程式碼 var evt = document.createEvent('Event'); // ......省略程式碼 function callCallback() { fakeNode.removeEventListener(evtType, callCallback, false); // ......省略程式碼 // 注意這個 func 就是我們的回掉 ƒ onClick() { console.log('child!') } func.apply(context, funcArgs); } // ......省略程式碼 var evtType = "react-" + (name ? name : 'invokeguardedcallback'); // Attach our event handlers fakeNode.addEventListener(evtType, callCallback, false); // Synchronously dispatch our fake event. If the user-provided function // errors, it will trigger our global error handler. evt.initEvent(evtType, false, false); fakeNode.dispatchEvent(evt); // ......省略程式碼 } ```  接著迴圈去執行下一個事件。 ## 參考 [github-youngwind -React 事件代理與 stopImmediatePropagation](https://github.com/youngwind/blog/issues/107) [React官網-事件處理](https://zh-hans.reactjs.org/docs/handling-events.html) [知乎-超厲害-React事件機制](https://zhuanlan.zhihu.com/p/4