Как поставить один обработчик, который слушает много элементов?

Question

[dom1n1k]

Фактически, нужен vanilla-аналог примерно такого jQuery-кода:

$("body").on("click", "a.someclass", function (event) {
    // ...
});

Идея такая: на странице много ссылок (а может и кнопок), клики по которым нужно слушать. По каким именно - определяется селектором (класс или атрибут).

Вешать 100500 одинаковых обработчиков на каждую ссылку не хочется. Во-первых, их может быть много. Во-вторых, эти количество этих ссылок может меняться, могут добавиться, могут убавиться.
Хочется один центральный обработчик, который всё это разрулит. Фактически, ему только нужно понять, что клик произошел на одном из нужных [a] элементов и получить доступ к этому элементу (потому что на нём висят атрибуты).

Про всплытие и перехват событий, конечно же, читал - но что-то не могу на практике сложить всё это в кучу. Непонятность в том, где и когда конкретно я должен перехватывать событие? Засада в том, что внутри [a] ведь могут быть другие элементы, то есть переменная event.target не обязательно будет указывать на [a].

Answer 1

[Lumore]

Мой вариант:

<a data-target="modal">Open modal</a>
<a data-target="sidebar">Toggle sidebar</a>
<a data-target="test" class="link" id="testLink">Test link</a>

$(document).on('click', '[data-target]', function() {
var $target = $(this).data('target');

if($target == 'modal') {
//open modal
} else if($target == 'sidebar') {
//toggle sidebar
} else if($target == 'test') {
var $class = $(this).attr('class'); // 'link'
var $id = $(this).attr('id'); // 'testLink'
//.... и т.д.
}
});

Answer 2

[Дмитрий]

все правильно мыслите про делегирование, вешаете обработчик на родителя, да хоть на body. И отлавливаете клики по ссылкам, далее отсеиваете нужные по классу или атрибуту.

Comments

[dom1n1k]

А непонятно, как отловить нужный элемент, если у него есть вложенные

[dom1n1k]

Точнее, я нашёл как это сделать:
learn.javascript.ru/event-delegation
...но там описан как-той адский костыль с ручным ползаньем по DOM-дереву туда-обратно. Я думал, есть какой-то более красивый способ. Боюсь, что это будет тормозить при сложной странице на много тыщ узлов.