Слушатель событий для текущих и будущих элементов, * без * 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

я написал больше функций общего назначения, которая принимает селектор, событие типа и функцию обработчика, сродни on функции JQuery в:

/** 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); }); 

Это работает на всех современных браузерах и Microsoft Edge. Для того, чтобы сделать его работу в IE9 - IE11 тест target.matches(selector) должен быть изменен следующим образом:

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

, а затем тест if (isMatch) будет работать для тех браузеров, а также.

См. Также мой ответ для Adding event listeners to multiple elements, который добавляет слушателей событий к самим элементам, а не к body.