Ресурсы: Простой список событий Справочник по событиям addEventListener() Объект события removeEventListener()
Событие - это сигнал от браузера, о том, что что-то произошло (клик, двойной клик, наведение мыши, убирание мыши с элемента, прокрутка колесика мыши, отправка данных формы, нажатие клавиш на клавиатуре итд)
Чтобы использовать какое-либо событие, необходимо назначить для него
обработчик события - функцию, которая срабатывает, как только событие произошло.
Например, если пользователь кликает на какое-то меню-гамбургер, срабатывает функция, раскрывающая это меню.
Способы назначения обработчиков событий 1. Использовать html-атрибут прямо в вёрстке
Код
<button onclick="alert('Hello')">Нажми меня</button>
Данный способ не рекомендуется применять в реальных проектах.
2. Использование свойств DOM-дерева для событий.
Выбираем элемент со страницы и используем свойство DOM-дерева (например,
onclick), чтобы привязать выполнение функции.
Код
const btn = document.querySelector('button');
btn.onclick = function() {
alert('Hello');
};
В реальных проектах данный способ почти не используется, поскольку он имеет одну большую проблему: назначенный данным способом обработчик события нельзя будет потом удалить при надобности (например, в случае, когда нужно удалить обработчик события после выполнения функции)
3. Назначение обработчика через
addEventListener() Код
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
alert('Hello, World!');
});
Первым аргументом передаётся название события, вторым - callback-функция(собственно, она и будет обработчиком), которая должна выполниться, после того, как событие произойдёт.
Этим способом мы имеем возможность назначать несколько действий на одно событие:
Код
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
alert('Hello, World!');
});
btn.addEventListener('click', () => {
alert('I love JavaScript');
});
В результате при клике на кнопку сначала откроется окно с текстом '
Hello, World!', а когда мы его закроем, откроется окно с текстом '
I love JavaScript'.
Добиться такого предыдущим способом не удалось бы, вывелось бы только второе окно, а первое мы бы потеряли.
Иногда необходимо получать какие-то данные об элементе, с которым мы взаимодействуем: что за событие произошло в данный момент, что за элемент используется, его координаты и так далее.
Для этого используется специальный объект
event, который как и любой объект имеет свои свойства.
Данный объект события передаётся как первый аргумент в callback-функцию, при этом название его может быть любым, но чаще его называют либо
event, либо просто
e Код
btn.addEventListener('click', (e) => {
alert('I love JavaScript');
});
У объекта
event есть свойство
target - отражает элемент, на котором произошло событие.
Код
btn.addEventListener('mouseenter', (e) => {
console.log(e.target);
});
И в консоли мы получим наш элемент
Цитата
<button>Нажми меня</button>
Мы получили доступ к элементу, на котором произошло событие, а значит можем с ним что-то сделать, например, изменить его стили или, к примеру, вообще его удалить
Код
btn.addEventListener('mouseenter', (e) => {
console.log(e.target);
e.target.remove();
});
В данном примере кнопка будет исчезать со страницы как только пользователь наведет на неё курсор мыши.
Метод
removeEventListener() позволяет удалить ранее назначенный обработчик события, при этом необходимо использовать точно такую же функцию, как мы назначали для обработчика событий.
При этом следует понимать, что
это не одна и таже функция.
Для того, чтобы иметь возможность удалить на каком-то этапе эту функцию, выносим её в отдельную переменную
Код
const deleteElement = (e) => {
e.target.remove();
};
btn.addEventListener('click', deleteElement);
Дословно: после клика по элементу
btn выполнится функция
deleteElement Код
btn.removeEventListener('click', deleteElement); // так удаляется обработчик
Как это можно использовать? Например, так:
Код
const btn = document.querySelector('button');
let i = 0;
const deleteElement = (e) => {
console.log(e.target);
i++;
if (i == 1) {
btn.removeEventListener('click', deleteElement);
}
};
btn.addEventListener('click', deleteElement);
В данном случае данные в консоли мы получим один раз, потому что после этого сработает условие
i == 1 и обработчик события удалится.
Всплытие событий
Напишем вложенную структуру и назначим события каждому элементу
Код
<div class="overlay">
<button id="btn">Нажми меня</button>
</div>
Код
const btn = document.querySelector('button'),
overlay = document.querySelector('.overlay');
const deleteElement = (e) => {
console.log(e.target); // выводит элемент, на котором произошло событие
console.log(e.type); // выводит тип события
};
btn.addEventListener('click', deleteElement);
overlay.addEventListener('click', deleteElement);
То есть в данном случае мы имеем два элемента, один из них родительский, другой вложен в него, при этом на каждом из них назначен свой обработчик события, но обрабатывающий одно и тоже действие (клик мышью).
И если сейчас кликнуть один раз на кнопку, то в консоли получим два одинаковых ответа:
Цитата
<button id="btn">Нажми меня</button>
// click
<button id="btn">Нажми меня</button>
// click
При этом событие сначала сработает на вложенном элементе, и только после этого оно поднимается и срабатывает на родительском элементе (
всплытие события), и каждый раз
e.target ссылается на элемент, на котором произошло первоначально событие (на кнопку).
Можно изменить это поведение, если использовать свойство
currentTarget Код
btn.addEventListener('mouseenter', (e) => {
console.log(e.currentTarget);
e.target.remove();
});
И в консоли уже получаем:
Цитата
<button id="btn">Нажми меня</button>
// click
<button id="btn">Нажми меня</button>
// click
Отмена стандартного поведения элементов в браузере
1 способ (почти не используется)
Вернуть
false в обработчике события в самом конце
Код
const deleteElement = (e) => {
e.target.remove();
return false;
};
btn.addEventListener('click', deleteElement);
С помощью метода
preventDefault() Код
const link = document.querySelector('a');
link.addEventListener('click', (event) => {
event.preventDefault(); // отменили стандартное поведение, помещается всегда в начале кода
console.log(event.target);
});
Теперь при клике на ссылку не будет происходить переход на страницу сайта, а будет выводиться в консоль элемент, на котором происходит событие (ссылка в данном случае)
Применяем одинаковый функционал на множество элементов
Например, на странице сайта множество одинаковых кнопок и мы все их получили:
Код
const btns = document.querySelectorAll('button');
Так как это псевдомассив, применяем к нему метод
forEach(), за счёт чего назначаем один и тот же обработчик события сразу на несколько элементов
Код
const btns = document.querySelectorAll('button');
btns.forEach(btn => {
btn.addEventListener('click', deleteElement);
});
У
addEventListener() существует и третий аргумент, объект, в который можно передавать различные опции события.
Например, опция
once даёт указание, что событие должно происходить только один раз (хорошая альтернатива для
removeEventListener()).
Код
btns.forEach(btn => {
btn.addEventListener('click', deleteElement, {once: true});
});
Добавлять комментарии могут только зарегистрированные пользователи.
