Для добавления двух или более обработчиков событий на элемент JavaScript предоставляет несколько подходов, и каждый из них имеет свои особенности. Вот несколько способов, которыми вы можете достичь этой цели:
1. Использование метода addEventListener():
Этот метод позволяет добавить обработчик события к элементу, не затрагивая уже существующие обработчики. Если вы хотите добавить два обработчика на одно событие, вы можете просто использовать этот метод дважды. Вот пример:
const element = document.querySelector("#myElement");
element.addEventListener("click", handler1);
element.addEventListener("click", handler2);
Оба обработчика (handler1 и handler2) будут вызываться при событии "click" на элементе.
2. Использование свойства onEvent:
Каждый элемент DOM имеет событийные свойства (например, onclick, ondblclick, onkeypress и т.д.), которые можно использовать для назначения обработчиков. В этом случае, чтобы добавить два обработчика на одно событие, вы должны установить значение свойства равным функции-обертке, которая вызывает оба обработчика. Вот пример:
const element = document.querySelector("#myElement");
element.onclick = function() {
handler1();
handler2();
};
В этом примере оба обработчика (handler1 и handler2) будут вызываться по событию "click" на элементе.
3. Использование старого метода обработки событий (DOM Level 0):
Этот метод менее рекомендуем, так как он устарел, но все же может быть полезен в некоторых случаях. Для добавления нескольких обработчиков событий вы можете просто назначить функцию, которая вызывает все обработчики. Вот пример:
const element = document.querySelector("#myElement");
element.onclick = function() {
handler1();
handler2();
};
Оба обработчика (handler1 и handler2) будут вызываться при событии "click" на элементе.
Важно помнить, что порядок вызова обработчиков будет соответствовать порядку их назначения. Поэтому, если вам важен порядок выполнения обработчиков, убедитесь, что вы добавляете их в правильной последовательности.
Вы можете выбрать любой из этих подходов в зависимости от ваших практических потребностей и предпочтений. Но самый рекомендуемый способ - использование метода addEventListener(), так как он позволяет более гибко управлять обработкой событий и не перезаписывает уже существующие обработчики.