Добавить прослушиватель событий ко всем существующим и будущим существующим элементам DOM vanilla Javascript [дубликат]

Обработчики привязки в native API выполняются с использованием addEventListener().

Чтобы эмулировать делегирование события jQuery, вы могли бы довольно легко создать систему, которая использует метод .matches() для проверки выбранного вами селектора.

function delegate(el, evt, sel, handler) {
    el.addEventListener(evt, function(event) {
        var t = event.target;
        while (t && t !== this) {
            if (t.matches(sel)) {
                handler.call(t, event);
            }
            t = t.parentNode;
        }
    });
}

Возможно, есть некоторые настройки, но в основном это функция, которая связывает элемент, например document, тип события, селектор и обработчик.

Он начинается с e.target и пересекает родителей, пока не попадет в связанный элемент. Каждый раз он проверяет, соответствует ли текущий элемент селектору, и если это так, он вызывает обработчик.

Итак, вы бы назвали его следующим:

delegate(document, "click", ".some_elem", function(event) {
    this.style.border = "2px dashed orange";
});

Вот живая демонстрация, которая также добавляет динамические элементы, чтобы показать, что новые элементы также собраны.

function delegate(el, evt, sel, handler) {
    el.addEventListener(evt, function(event) {
        var t = event.target;
        while (t && t !== this) {
            if (t.matches(sel)) {
                handler.call(t, event);
            }
            t = t.parentNode;
        }
    });
}

delegate(document, "click", ".some_elem", function(event) {
    this.parentNode.appendChild(this.cloneNode(true));
    this.style.border = "2px dashed orange";
});

<div>
  <p class="some_elem">
    <span>
      CLICK ME
    </span>
  </p>
</div>

Вот прокладка, чтобы добавить немного больше поддержки для .matches().

HTMLElement.prototype.matches =
  HTMLElement.prototype.matches ||
  HTMLElement.prototype.matchesSelector ||
  HTMLElement.prototype.webkitMatchesSelector ||
  HTMLElement.prototype.mozMatchesSelector ||
  HTMLElement.prototype.msMatchesSelector ||
  HTMLElement.prototype.oMatchesSelector;