dom1n1k
@dom1n1k

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

Фактически, нужен vanilla-аналог примерно такого jQuery-кода:
$("body").on("click", "a.someclass", function (event) {
    // ...
});

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

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

Про всплытие и перехват событий, конечно же, читал - но что-то не могу на практике сложить всё это в кучу. Непонятность в том, где и когда конкретно я должен перехватывать событие? Засада в том, что внутри [a] ведь могут быть другие элементы, то есть переменная event.target не обязательно будет указывать на [a].
  • Вопрос задан
  • 213 просмотров
Пригласить эксперта
Ответы на вопрос 2
Lumore
@Lumore
Front-end developer
Мой вариант:
<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'
//.... и т.д.
}
});
Ответ написан
@Sad_Bro
На темной стороне.
все правильно мыслите про делегирование, вешаете обработчик на родителя, да хоть на body. И отлавливаете клики по ссылкам, далее отсеиваете нужные по классу или атрибуту.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
20 янв. 2021, в 13:55
10000 руб./за проект
20 янв. 2021, в 13:22
3000 руб./за проект
20 янв. 2021, в 12:56
1500 руб./в час