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

Доброго вечера.
Есть строка таблицы, по щелчку по ней происходит событие click. Я бы хотел ловить это событие в обработчике на document, чтобы захватить и те элементы, которые будут добавлены динамически. В jQuery я бы сделал так:
$(document).on('click', '[data-behavior="something"]', event => {
    // Все работает
});

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

Заранее спасибо.
  • Вопрос задан
  • 137 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега JavaScript
Как это сделали авторы jQuery - у них-то все работает?

Поднимаются по DOM-дереву от event.target до элемента, к которому подвешен обработчик, проверяют встреченные узлы на соответствие селектору. Интересуют подробности - откройте код jQuery, да посмотрите.
Ответ написан
Stalker_RED
@Stalker_RED
document.addEventListener('click', function(){
	if (event.target.closest('[data-behavior="something"]')) {
  	event.target.classList.toggle('highlight')
  }
})

https://jsfiddle.net/q36dzc4o/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы