理解JavaScript中的事件路由冒泡過程及委託代理機制

轉載地址：理解JavaScript中的事件路由冒泡過程及委託代理機制 - OurJS

當我用純CSS實現這個以後。我開始用JavaScript和樣式類來完善功能。

然後，我有一些想法，我想使用Delegated Events （ 事件委託 ）但是我不想有任何依賴，插入任何庫，包括jQuery。我需要自己實現事件委託了。

我們先來看看事件委託到底是什麼？他們是怎麼工作的，怎麼去實現這種機制。

好，它解決了什麼問題？

我們先看個簡單的例子。

先假設我們有一組按鈕，我一次點擊一個按鈕，然後我希望被點中的狀態設爲"active"。再次點擊時取消active。

然後，我們可以寫一些HTML：

<ul class="toolbar">
  <li><button class="btn">Pencil</button></li>
  <li><button class="btn">Pen</button></li>
  <li><button class="btn">Eraser</button></li>
</ul>

我可以用一些標準的Javascript事件處理上面的邏輯：

var buttons = document.querySelectorAll(".toolbar .btn");
for(var i = 0; i < buttons.length; i++) {
  var button = buttons[i];
  button.addEventListener("click", function() {
    if(!button.classList.contains("active"))
      button.classList.add("active");
    else
      button.classList.remove("active");
  });
}

看上去不錯，但是它其實不能像你期望的那樣工作。

閉包的陷阱

如果你有一定的JavaScript開發經驗，這個問題就很明顯了。

對於外行來說button變量是被封閉的，每次都會找到對應的button……但是其實這裏只有一個button；每次循環都會被重新分配。

第一個循環它指向第一個button，接下來是第二個。但當你點擊時button變量永遠只指向最後一個button元素，問題出在這。

我們需要的是一個穩定的作用域；讓我們重構一下。

var buttons = document.querySelectorAll(".toolbar button");
var createToolbarButtonHandler = function(button) {
  return function() {
    if(!button.classList.contains("active"))
      button.classList.add("active");
    else
      button.classList.remove("active");
  };
};

for(var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", createToolBarButtonHandler(buttons[i]));
}

注* 上面這段代碼結構有點複雜，也可以簡單直接地使用一個閉包，封閉保存當前的button變量，如下所示：

var buttons = document.querySelectorAll(".toolbar .btn");

for(var i = 0; i < buttons.length; i++) {
  (function(button) {
    button.addEventListener("click", function() {
      if(!button.classList.contains("active"))
        button.classList.add("active");
      else
        button.classList.remove("active");
    });
  })(buttons[i])
}

現在它能正常工作了。指向永遠是正確的button

那麼這個方案有什麼問題？

這個方案看上去還可以，然而我們確實可以做得更好。

首先我們創建了太多的處理函數。爲每一個匹配的.toolbar button綁定了一個事件偵聽和一個回調處理。假如只有三個按鈕這種資源分配是可以忽略的。

然而，如果我們有1000個呢？

<ul class="toolbar">
  <li><button id="button_0001">Foo</button></li>
  <li><button id="button_0002">Bar</button></li>
  // ... 997 more elements ...
  <li><button id="button_1000">baz</button></li>
</ul>

它也不會崩潰，但是這並不是最佳的方案。我們分配了大量不必要的函數。讓我們重構一下，僅附加一次，即僅綁定一個函數（function），去處理這種有可能的數千次調用。

相對於封閉button變量去存儲當時我們點擊的對象，我們可以使用event對象去獲取當時點擊的對象。

event對象有一些元數據，在多次綁定的種情況下，我們可以使用currentTarget獲取當前綁定的對象，如上例的代碼就可以改成：

var buttons = document.querySelectorAll(".toolbar button");

var toolbarButtonHandler = function(e) {
  var button = e.currentTarget;
  if(!button.classList.contains("active"))
    button.classList.add("active");
  else
    button.classList.remove("active");
};

for(var i = 0; i < buttons.length; i++) {
  button.addEventListener("click", toolbarButtonHandler);
}

不錯！不過這只是簡化了單個函數，讓它得更具可讀性，然而它還是被綁定了多次。

但是，我們還可以做得更好。

讓我們假設一下，我們在這個列表裏動態地添加了一些按鈕。然後我們還要爲這些動態元素添加和移除事件綁定。然後我們還要持久化這些處理函數和當前上下文要用到的變量，這事聽上去就不靠譜。

也許還有其他方法。

讓我們先全面理解一下事件的工作原理，以及他們在DOM裏是怎樣傳遞的。

事件的工作原理

當用戶點擊一個元素時，一個事件就會被產生去通知用戶當前的行爲。事件在分發派遣時會有三個階段：

捕獲階段: Capturing
觸發階段: Target
冒泡階段: Bubbling

這個事件起始從document之前然後一路向下找到當前事件點擊到的對象。當事件達到點擊到的對象之後，它會按原路返回（冒泡過程），直到退出整個DOM樹。

這裏是一個HTML的例子：

<html>
<body>
  <ul>
    <li id="li_1"><button id="button_1">Button A</button></li>
    <li id="li_2"><button id="button_2">Button B</button></li>
    <li id="li_3"><button id="button_3">Button C</button></li>
  </ul>
</body>
</html>

當你單擊Button A時，事件經過的路徑會向下面這樣：

START
| #document \
| HTML |
| BODY } CAPTURE PHASE
| UL |
| LI#li_1 /
| BUTTON <-- TARGET PHASE
| LI#li_1 \
| UL |
| BODY } BUBBLING PHASE
| HTML |
v #document /
END

注意，這意思着你可以在事件的經過路徑上捕獲到你單擊所產生的事件，我們非常確定這個事件一定會經過他們的父元素ul元素。我們可以將我們的事件處理綁定到父元素上面，然後簡化我們的解決方案，這個就叫事件的委託及代理（Delegated Events）。

注*　其實Flash/Silverlight/WPF開發的事件機制是非常近似的，這裏有一張他們的事件流程圖。除了Silverlight 3使用了舊版IE的僅有冒泡階段的事件模型外，基本上也都有這三個階段。(舊版IE和SL3的事件處理只有一個從觸發對象冒泡到根對象的過程，可能是爲了簡化事件的處理機制。)

事件委託代理

委託（代理）事件是那些被綁定到父級元素的事件，但是隻有當滿足一定匹配條件時纔會被挪。

讓我們看一個具體的例子，我們看看上文的那個工具欄的例子：

<ul class="toolbar">
  <li><button class="btn">Pencil</button></li>
  <li><button class="btn">Pen</button></li>
  <li><button class="btn">Eraser</button></li>
</ul>

因爲我們知道單擊button元素會冒泡到UL.toolbar元素，讓我們將事件處理放到這裏試試。我們需要稍微調整一下：

var toolbar = document.querySelector(".toolbar");
toolbar.addEventListener("click", function(e) {
  var button = e.target;
  if(!button.classList.contains("active"))
    button.classList.add("active");
  else
    button.classList.remove("active");
});

這樣我們清理了大量的代碼，再也沒有循環了。注意我們使用了e.target代替了之前的e.currentTarget。這是因爲我們在一個不同的層次上面進行了事件偵聽。

e.target 是當前觸發事件的對象，即用戶真正單擊到的對象。

e.currentTarget 是當前處理事件的對象，即事件綁定的對象。

在我們的例子中e.currentTarget就是UL.toolbar。

注* 其實不止事件機制，在整個UI構架上FLEX(不是Flash) /Silverlight /WPF /Android的實現跟WEB也非常相似，都使用XML(HTML)實現模板及元素結構組織，Style(CSS)實現顯示樣式及UI，腳本（AS3,C#,Java,JS）實現控制。不過Web相對其他平臺更加開放，不過歷史遺留問題也更多。但是幾乎所有的平臺都支持Web標準，都內嵌有類似WebView這樣的內嵌Web渲染機制，相對各大平臺複雜的前端UI框架和學習曲線來說，使用Web技術實現Native APP的前端UI是非常低成本的一項選擇。

原文地址： codepen.io

理解JavaScript中的事件路由冒泡過程及委託代理機制

好，它解決了什麼問題？

閉包的陷阱

那麼這個方案有什麼問題？

事件的工作原理

事件委託代理

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

理解JavaScript中的事件路由冒泡過程及委託代理機制

我曾得到的最佳編程建議

爲什麼每個瀏覽器的UserAgent都有Mozilla字樣

徐飛：老碼農的技術理想

這段程序是幹嘛滴？

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結