當前和未來元素的事件監聽器，*沒有* jQuery

Question

如果我沒有記錯，我曾經看到過一種方法可以將事件監聽器綁定到符合特定條件的每個元素，也可以是查詢選擇器。再次尋找它除了高度依賴jQuery的人以外，我找不到任何東西，但我更喜歡用一種真正簡單的方法來實現這一點。

任何人都知道這個方法叫什麼？

Answer 1

您正在查找的方法被稱爲事件捕獲。你可以這樣說：

document.querySelector('body').addEventListener('click', function(evt) { 
    // Do some check on target 
    if (evt.target.classList.contains('some-class')) { 
     // DO CODE 
    } 
}, true); // Use Capturing 

Answer 2

我寫了一個更通用的函數，它接受一個選擇，事件類型和處理函數，類似於jQuery的on功能：

/** adds a live event handler akin to jQuery's on() */ 
function addLiveEventListeners(selector, event, handler){ 
    document.querySelector("body").addEventListener(
     event 
     ,function(evt){ 
      var target = evt.target; 
      while (target != null){ 
       if (target.matches(selector)){ 
        handler(evt); 
        return; 
       } 
       target = target.parentElement; 
      } 
     } 
     ,true 
    ); 
} 

對於例如，下面將呼籲在一個div上任意點擊，即使它是在稍後的時間加入到DOM：

addLiveEventListeners("div", "click", function(evt){ console.log(evt); }); 

這適用於所有現代瀏覽器和微軟的邊緣。爲了使其在IE9工作 - IE11測試target.matches(selector)應該修改像這樣：

var isMatch = target.matches ? target.matches(selector) : target.msMatchesSelector(selector); 

，然後測試if (isMatch)將這些瀏覽器正常工作。

另請參閱我對Adding event listeners to multiple elements的回答，它將事件偵聽器添加到元素本身，而不是body。