Как можно перехватить всплывающее событие посередине его пути?

Question

[Алексей Николаев]

Доброго вечера.
Есть строка таблицы, по щелчку по ней происходит событие click. Я бы хотел ловить это событие в обработчике на document, чтобы захватить и те элементы, которые будут добавлены динамически. В jQuery я бы сделал так:

$(document).on('click', '[data-behavior="something"]', event => {
    // Все работает
});

Но на чистом JS это сложнее. У объекта события, если его добавлять через document.addEventListener, event.target будет равно либо ячейке, либо тому, что в ней лежит, но не строке таблицы, а currentTarget, само собой, равно document. Если же добавлять события к нодам нужного селектора, то пропадет автоматический бинд события к новым элементам. Как это сделать без костылей? Как это сделали авторы jQuery - у них-то все работает? Каков алгоритм?

Заранее спасибо.

Answer 1

[0xD34F]

Как это сделали авторы jQuery - у них-то все работает?

Поднимаются по DOM-дереву от event.target до элемента, к которому подвешен обработчик, проверяют встреченные узлы на соответствие селектору. Интересуют подробности - откройте код jQuery, да посмотрите.

Comments

[Алексей Николаев]

Спасибо за ответ. То есть, на каждый условный клик они поднимаются по DOM-дереву? У меня есть похожий вариант, но посчитал его костылем.

> откройте код jQuery, да посмотрите.
Уже) Нужно разбираться, их код не так прост. Думал, может, есть какой-то известный алгоритм.

[0xD34F]

Алексей Николаев,

То есть, на каждый условный клик они поднимаются по DOM-дереву?

Ну да. И не только на клик.

[0xD34F]

Алексей Николаев,

> откройте код jQuery, да посмотрите.
Уже) Нужно разбираться, их код не так прост.

Куда конкретно смотреть - event.js - function on, add:, dispatch:, handlers: - можете сделать поиск этих фрагментов по коду. Это от назначения обработчиков и до интересующего вас момента, конкретно подъём по DOM'у - в handlers.

Answer 2

[Stalker_RED]

document.addEventListener('click', function(){
	if (event.target.closest('[data-behavior="something"]')) {
  	event.target.classList.toggle('highlight')
  }
})

https://jsfiddle.net/q36dzc4o/

Comments

[Алексей Николаев]

Сделал также. Изначально посчитал данный вариант костылем, т.к. на каждый клик будет вызываться closest().

[Stalker_RED]

Алексей Николаев, ну, или так (делегирование и проверки) или MutationObserver, и добавлять на каждый элемент отдельный listener.
И еще надо бы разобраться что производительнее.