Подтвердить что ты не робот

Родной addEventListener с селектором вроде .on() в jQuery

Кто-нибудь знает, как метод jQuery.on() может быть реализован в native JS? Метод addEventListener не принимает элемент child/selector как способ фильтрации, и я не думаю, что у меня есть надлежащее знание пузырька/захвата, чтобы полностью понять, что там происходит. Я проконсультировался с источником в event.js, где, как представляется, в конечном итоге addEventListener действительно используется так же, как обычно, но я не уверен, что я достаточно уверен в источнике.

Если собственный метод не обеспечивает механизм для использования пузырьков и захватов, то действительно ли функция jQuery.on() действительно имеет какую-либо выгоду или просто делает это так? У меня создалось впечатление, что

.on('parent', '.child', fn(){});

более эффективен, чем привязывать событие ко всем детям по отдельности, но из моей интерпретации источника трудно сказать, как jQuery каким-то образом управляет этим, что приводит к повышению производительности, или если оно просто для чтения.

Существует ли стандартная методология для реализации событий на родительском объекте, которые используют фазы буферизации/захвата для дочерних элементов, а не для привязки события к каждому отдельному ребенку?

Ответ 1

Чтобы выполнить делегирование событий изначально:

parent.addEventListener('click', function(e) {
    if(e.target.classList.contains('myclass')) {
        // this code will be executed only when elements with class 
        // 'myclass' are clicked on
    }
});

Эффективность, о которой вы говорите, связана с тем, сколько добавляемых обработчиков событий. Представьте таблицу со 100 строками. Гораздо эффективнее присоединить один обработчик события к элементу таблицы, а затем "делегировать" каждой строке, чем присоединить 100 обработчиков событий, 1 к каждой строке.

Делегирование событий причины объясняется тем, что событие click на самом деле срабатывает как для дочернего, так и для родительского (потому что вы нажимаете на область внутри родителя). Вышеприведенный фрагмент кода запускается в родительском клик-событии, но выполняется только тогда, когда условие возвращает true для события target, таким образом имитируя непосредственно подключенный обработчик событий.

Bubbling/capture - связанная проблема, но вам нужно только беспокоиться об этом, если порядок нескольких обработчиков событий срабатывает. Я рекомендую читать далее порядок событий, если вы заинтересованы в понимании барботажа против захвата.

Наиболее распространенным преимуществом делегирования событий является то, что он обрабатывает новые элементы, которые добавляются в DOM после присоединения обработчика события. Возьмите приведенный выше пример таблицы из 100 строк с обработчиками кликов. Если мы используем привязку обработчика прямых событий (100 обработчиков событий), то новые добавляемые строки потребуют добавления обработчиков событий вручную. Если мы будем использовать делегированные события, то новые строки будут автоматически "иметь" обработчик событий, поскольку он технически был добавлен к родительскому элементу, который будет отображать все будущие события. Прочитайте Что такое DOM Event Delegation, как предположил Феликс Клинг, для получения дополнительной информации.