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

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

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

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

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

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

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

 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 на самом деле срабатывает как для дочернего, так и для родительского (потому что вы нажимаете на область внутри родителя). Вышеупомянутый fragment кода запускается в событии клика родителя, но выполняется только тогда, когда условие возвращает true для цели события, таким образом, имитируя непосредственно подключенный обработчик событий.

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

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