Как добавить несколько обработчиков событий addEventListener() к одному элементу в JavaScript?
Несмотря на мой опыт работы с кодом, я не перестаю удивляться, причём чаще всего из-за каких-то банальных вещей.
Так, при дублировании функционала из jQuery на JavaScript, который, к слову говоря, я реализовывал в рамках статьи об ещё одном варианте отложенной загрузки скриптов, мне потребовалось прицепить несколько обработчиков к одному конкретному элементу. В jQuery это решается на «раз-два»:
$(".element").one("click scroll", function() { // Клик или прокрутка элемента с class="element"
// Нужное действие
});
когда как в JavaScript подобный трюк не сработает:
document.querySelector(".element").addEventListener("click scroll", function() { // Клик или прокрутка элемента с class="element"
// Нужное действие
});
Как я вышел из этой ситуации? А довольно просто: создал массив с нужными для меня обработчиками и при его обходе через метод forEach применил каждый к указанному элементу:
var event_list = ["click", "scroll"]; // Клик или прокрутка элемента
event_list.forEach(function(event) {
document.querySelector(".element").addEventListener(event, function() { // Применяем к элементу с class="element"
// Нужное действие
});
});
Довольно просто и, думаю, полезно для ваших разработок.