Событие - сигнал от браузера о том, что что-то произошло (клик, двойной клик, наведение мыши, отправка данных формы и т.д)
Обработчик - это функция, которая срабатывает, как только событие произошло.
Например, пользователь кликает на какое-то меню-гамбургер, срабатывает функция, открывающая это меню.
Способы назначения обработчиков событий: 1. С использованием html-атрибута непосредственно в вёрстке (редко используемый, не для крупных проектов)
Код
<button onclick="alert('Click')" id="btn">Нажми меня</button>
2. Использование свойств DOM-дерева для событий (редко используется в реальных проектах):
Получили кнопку со страницы:
Код
const btn = document.querySelector('button');
btn.onclick = function () {
alert('Hello');
};
3. Современный метод
Код
btn.addEventListener('click', () => {
alert('Hello');
});
- объект события, содержащий информацию о событии, передается как аргумент в коллбек-функцию (обозначается как
e, event).
event.target - элемент, на котором произошло событие
Такой код:
Код
btn.addEventListener('click', (e) => {
console.log(e.target);
});
выведет в консоль код кнопки, по которой кликнул пользователь.
А так можно взаимодействовать с этим элементом, например, удалить его после того, как событие клика по нему произошло:
Код
btn.addEventListener('click', (e) => {
e.target.remove();
});
Иногда требуется удалять обработчик события, при этом необходимо использовать точно такую же функцию, которую назначали для обработчика (но, при этом, это будет не одна и таже функция):
Код
const deleteElement = (e) => {
e.target.remove();
}
btn.addEventListener('click', deleteElement);
btn.removeEventListener('click', deleteElement);
Создадим переменную
i с первоначальным значением равным 0
И будем внутри функции увеличивать значение
i на единицу
Код
let i = 0;
const deleteElement = (e) => {
console.log(e.target);
i++;
}
Также внутри функции добавим условие, что если
i будет в какой-то момент равна 1, то нам нужно удалить обработчик события
Код
let i = 0;
const deleteElement = (e) => {
console.log(e.target);
i++;
if (i == 1) {
btn.removeEventListener('click', deleteElement);
}
}
Всплытие событий
Рассмотрим такой вариант вёрстки:
Код
<div class="overlay">
<button id="btn">Нажми меня</button>
</div>
<button>Нажми меня</button>
<button>Нажми меня</button>
Получим наш блок с классом
overlay со страницы и сохраним в переменную:
Код
const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');
И у нас будет теперь такая функция, в консоль будем выводить не только элемент, на котором произошло событие, но и тип события:
Код
const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');
const deleteElement = (e) => {
console.log(e.target);
console.log(e.type);
}
btn.addEventListener('click', deleteElement);
overlay.addEventListener('click', deleteElement);
Здесь мы получаем ситуацию, где есть родительский элемент
.overlay, внутри которого дочерний элемент
button, на них обоих навешаны обработчики события, которые обрабатывают одно и тоже действие (у нас в данном случае это
click).
Если сейчас зайти на страницу и кликнуть на кнопку, в консоли получим два результата работы функции:
Цитата
<button id="button">Нажми меня</button>
click
<button id="button">Нажми меня</button>
click
Так произошло потому, что сначала событие сработало на вложенном элементе, а затем на родительском, то есть поднялось (всплыло) по иерархии вверх.
И в консоли мы два раза получили тот элемент, на котором изначально сработало событие, то есть кнопку.
Но если вместо
target написать
currentTarget, то в консоли последовательно получим те элементы на которых срабатывало событие
Код
const deleteElement = (e) => {
console.log(e.currentTarget);
console.log(e.type);
}
Цитата
<button id="button">Нажми меня</button>
click
<div class="overlay">...</div>
click
Отмена стандартного поведения браузера
Первый способ: вернуть в обработчике события
false в самом конце функции (старый, не используемый способ)
Второй вариант Код
const link = document.querySelector('a');
link.addEventListener('click', (e) => {
e.preventDefault(); // помещаем в самое начало всегда
console.log('Hello!');
});
Один обработчик события для нескольких элементов
Получаем массив со всеми кнопками и перебираем его с помощью метода
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});
});
Всего комментариев: 0