Мощные VPS/VDS-сервера на новейшем поколении процессоров Intel от 330р в месяц   •   Реклама
405 просм
0 комм
Поделиться:

Как добавить несколько обработчиков событий 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"

		// Нужное действие

	});
  
});

Довольно просто и, думаю, полезно для ваших разработок.

0
комментариев
Форма комментирования этой статьи скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
Подняться наверх
«Pandoge» - помощник вебмастера