Собственный JS эквивалентен делегированию jQuery

Какова собственная реализация делегирования событий для динамически создаваемых элементов dom?

Я попытался посмотреть на источник jQuery, но не могу следовать методу .on.

Примечание: в настоящее время я прикрепляю обработчики событий после создания элементов dom, что кажется довольно стандартным, но мне нравится, как jQuery .on обрабатывает события динамически создаваемых элементов с этим синтаксисом $( document ).on( "click", ".selector", handler );.

Ответ 1

Что происходит, в основном это:

// $(document).on("click", <selector>, handler)
document.addEventListener("click", function(e) {
    for (var target=e.target; target && target!=this; target=target.parentNode) {
    // loop parent nodes from the target to the delegation node
        if (target.matches(<selector>)) {
            handler.call(target, e);
            break;
        }
    }
}, false);

Однако e.currentTarget есть document, когда вызывается handler, а e.stop[Immediate]Propagation() будет работать по-другому. jQuery рефератов по этому (включая порядок звонков) много.

Я использовал метод .matches(), который еще не является стандартным, но уже доступен под разными именами в современных браузерах. Вы можете использовать собственный предикат для тестирования элементов вместо селектора. И addEventListener, очевидно, не является oldIE-совместимым.

Ответ 2

Это должно сделать это для вас на регулярном элементе HTML:

HTMLElement.prototype.on = function(event, selector, handler) {
    this.addEventListener(event, function(e) {
        let target = e.target;
        if (typeof(selector) === 'string') {
            while (!target.matches(selector) && target !== this) {
                target = target.parentElement;
            }

            if (target.matches(selector))
                handler.call(target, e);
        } else {
                selector.call(this, e);
        }
    });
};

Ответ 3

Делегирование событий может быть достигнуто даже без перебора всех предков цели события.

$(document).on("click", selector, handler);

можно написать в NativeJS как:

document.addEventListener("click", event => {
  var el = document.querySelector(selector);
  if (el && el.contains(event.target)) {
    handler.call(el, event);
  }
});