stopPropagation & preventDefault

stopPropagation & preventDefault

  • capture phase

    • 事件發生時（例如 click），DOM Tree 觸發的流程。從 Document -> html -> body -> ... 由上而下，直到 e.target

  • bubbling phase

    • 就反方向，從 e.target 到 Document

  • target phase

    • 如其名

    • **e.target 永遠指向觸發事件的節點

      **

    • 在這個 phase，事件的執行順序是先註冊的先執行（即程式碼中，行數排比較前面的先執行），而非預設的先補獲後冒泡

    • 另外，e.currentTarget 則是被註冊事件監聽的該節點

  • 請操作 https://developer.mozilla.org/zh-TW/docs/Web/API/Event/eventPhase 的實例

  • e.stopPropagation();

    • 就是中止事件的傳遞

    • 但要注意：如果你在同一個 target 上有其他同樣類型的 listener，那麼其他的還是會被執行！

      可以用 e.stopImmediatePropagation 來 prevent other listeners of the same event from being called.

  • e.preventDefault();

    • 只是讓預設行為不執行而已。例如，讓 form 的 reset 按鈕不清除資料；讓超連結被點擊後不會開啟任何視窗

    • 但要注意：它的效果也是會傳遞的！就像若在 ul 監聽點擊事件，點擊其下每個 li 節點都可觸發 ul 上的監聽

    • Event Delegation（委派）指的是，將事件監聽放在很多很像的節點的父節點上，可以減少監聽器，降低資源消耗

  • 補充閱讀資訊

PreviousPolling & SSE & WebSocketNextDebounce & Throttle

Last updated