addEventListener()
Метод addEventListener — это самый функциональный способ позволяющий добавить обработчик события к указанному элементу и запустить выполнение программы при совершении заданного действия. Получить информацию о сигналах браузера можно из Document (DOM), Element , Window и других объектов поддерживающих события.
addEventListener() является одних из трёх способом прослушивать события, наряду с добавление атрибута к тегам в HTML и обращения к свойствам объекта напрямую.
addEventListener() имеет важное преимущество перед остальными способами, метод позволяет навесить несколько обработчиков на одно событие. Это происходит из-за того, что у объекта только одно свойство, например с именем onclick (клик) или mousemove (движение мыши) и если обратиться к одному из них напрямую несколько раз, второй обработчик перезапишет первый.
В примере выше, как раз можно наблюдать описанный эффект — модальное окно с Да будет так! появится, а вот Терпение и труд всё перетрут нет.
Также отследить некоторые события можно только с помощью addEventListener() , например навесить обработчик на DOMContentLoaded по другому не получиться.
Синтаксис
element.addEventListener(eventType, handler, options); element — объект, действие по которому отслеживаем.
eventType — тип события, которое мы хотим отследить: клик, прокрутка мыши, нажатие клавиши и т.д. Написание чувствительно к регистру: click правильно, Click или CLICK неправильно.
handler — имя функции или сама функция, которая будет выполнена после наступления события.
options — необязательный объект со свойствами, внутри которого доступны следующие параметры:
- capture : значение записывается в формате true или false и задает этап, на котором будет обработано событие. По умолчанию false — на этапе всплытия, true — на этапе погружения (перехват). Если вместо options задать булево значение — это будет равносильно
- once : значение типа boolean , по умолчанию false , если true тогда обработчик будет удален после выполнения.
- passive : по умолчанию false , если true обработчик никогда не вызовет preventDefault() , взамен этого будет сгенерировано предупреждение в console.
const clickButton = document.querySelector('button'); clickButton.addEventListener('click', showMessage, < capture: false, once: true, passive: false, >) function showMessage() При клике на кнопку мы получим модальное окно с сообщением, если кликнуть второй раз ничего не произойдет, так как свойство once равно true — после события обработчик удаляется.
removeEventListener()
Удалить обработчик события можно также с помощью метода removeEventListener() . В этом случае появляется возможность сделать это когда нам удобно. Для того, чтобы все сработало, первые два параметра у обоих методов должны быть идентичными. Важно также передать в removeEventListener() именно название функции, с анонимными функциями ничего не получиться, даже если записать код точь в точь.
В этом случае, если поменять текст на кнопке обработчик удален не будет.
Объект события
Для более детального представления о том какие действия происходят на странице используют объект события, который создается браузером после совершения действия. Такой объект записывается в качестве первого аргумента функции обработчика, для названия принято использовать event . Это позволяет гибко настраивать отслеживание получая информацию о том какая клавиша была нажата, координаты указателя мыши и другое.
const btnJS = document.querySelector('.btn'); btnJS.addEventListener('click', showElemObjEvent); function showElemObjEvent(event) < console.log(event.type); // тип события console.log(event.target); // элемент на котором произошло событие console.log(event.clientX); // координаты курсора по оси X console.log(event.clientY); // координаты курсора по оси Y console.log(event); // получим весь объект с информацией о событии > Популярные события
Рассмотрим события, которые отслеживаются чаще других:
click — клик левой кнопкой мыши по элементу, на сенсорных устройствах это касание;
contextmenu — клик на элемент правой кнопкой мыши — вызов контекстного меню;
mouseover / mouseout — наведение на элемент курсора мыши / курсор покидает элемент;
keydown / keyup — клавиша нажата / клавиша отпущена;
DOMContentLoaded — весь HTML загружен, а DOM-дерево построено.
Для того, чтобы посмотреть все возможные события для DOM-элемента, нажмите правой кнопкой на страницу, далее Просмотреть код, выберите элемент на странице, а далее кликните на Свойства (Properties). В фильтре наберите on, все что начинает на on являются событиями.
Как добавить обработчик на множество элементом
addEventListener и forEach
const choice = document.querySelectorAll('.myChoice'); choice.forEach(choiceItem => < choiceItem.addEventListener('click', () =>answer(choiceItem.innerHTML)); >) function answer(text) < if (text === 'JavaScript') < alert('Отличный выбор!'); >else < alert('Возможно вы ошиблись?'); >> В данном примере мы получили все элементы с классом myChoice в объект через querySelectorAll() , а потом с помощью forEach() перебором назначили обработчик события на все кнопки.
Делегирование событий
Вторым и более удачным способом отслеживать события на множестве элементов это делегирование.
td < border: 1px solid; width: 90px; height: 90px; text-align: center; border-color: black; >.hideText В этом примере мы назначаем обработчик для родителя в котором содержатся интересующие нас элементы. Далее отслеживаем с помощью event.target.closest(‘.hideText’) было ли взаимодействие с тегом с классом .hideText и если это так удаляем оттуда класс, который делает текст белым.
Всплытие и погружение
Всплытие — это когда обработчик сначала срабатывает на элементе с которым произошло взаимодействие, затем событие обрабатывается на его родителе и далее выше по цепочке.
в четвертую очередь не сработает в третью очередь во вторую очередь кликаем сюда - обработчик сработает на этом элементе в первую очередь
Погружение — при взаимодействии с объектом, который находится ниже чем элемент со свойством capture: true , сначала событие будет обработано на последнем, далее обработчик сработает на всех потомках и только потом на всех родителях.
в пятую очередь не сработает в четвертую очередь - элемент со свойством capture: true - в первую очередь - в третью очередь кликаем сюда - обработчик сработает на этом элементе во вторую очередь
Для того, чтобы понять тему потренируйтесь на примере, наблюдая последовательность выполнения действий при клике на различные элементы. Результат отслеживайте в console.
.square1 < width: 600px; height: 600px; background: red; display: flex; justify-content: center; align-items: center; >.square2 < width: 450px; height: 450px; background: blue; display: flex; justify-content: center; align-items: center; >.square3 < width: 350px; height: 350px; background: yellow; display: flex; justify-content: center; align-items: center; >.square4 const squareFirst = document.querySelector('.square1'); const squareSecond = document.querySelector('.square2'); const squareThird = document.querySelector('.square3'); const squareFourth = document.querySelector('.square4'); squareFirst.addEventListener('click', () => clickSquare('Квадрат №1')); squareSecond.addEventListener('click', () => clickSquare('Квадрат №2')); squareThird.addEventListener('click', () => clickSquare('Квадрат №3'), < "capture": true >); squareFourth.addEventListener('click', () => clickSquare('Квадрат №4')); function clickSquare(text)
Получаем доступ к элементу через this
Для того, чтобы получить доступ к элементу на котором висит обработчик, в функции можно использовать this .
Итого
Обработчик события это важный элемент в JavaScript, именно с помощью него можно отслеживать действия пользователя на странице. В свою очередь метод addEventListener() является основным способом для назначения таких обработчиков объектам.
Удалить обработчик события после использования можно двумя способами: с помощью свойства once со значением true или метода removeEventListener() .
Для того, чтобы получить более подробную информацию о событии используют объект события, который передается первым аргументом в функцию. Отсюда можно получить координаты клика, какая кнопка была нажата и многое другое.
Для того, чтобы назначить обработчик множеству элементов используют принцип делегирования — событие фиксируется не только на элементе которому был назначен обработчик, но и на всех вложенных. Второй способ — это навешивание обработчиков через цикл forEach() .
Skypro — научим с нуля