Артём Мáлков

Как добавить несколько обработчиков событий addEventListener() к одному элементу в JavaScript?

1 сен0 комм

Несмотря на мой опыт работы с кодом, я не перестаю удивляться, причём чаще всего из-за каких-то банальных вещей.

Так, при дублировании функционала из 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"

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

	});
  
});

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

Рекомендуем к просмотру
Аналог (эквивалент) метода one() из jQuery для JavaScript
Статьи и советы
Ещё один вариант отложенной загрузки скриптов на jQuery/JavaScript
Посты
Три варианта фиксации элемента на сайте на CSS/jQuery
Модули и скрипты
0
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
Подняться наверх
«Pandoge» - помощник вебмастера