Метод addEventListener () - пример кода прослушивателя событий JavaScript

Метод JavaScript addEventListener () позволяет настроить функции, которые будут вызываться при наступлении определенного события, например, когда пользователь нажимает кнопку. В этом руководстве показано, как реализовать addEventListener () в своем коде.

Понимание событий и обработчиков событий

События - это действия, которые происходят, когда пользователь или браузер манипулируют страницей. Они играют важную роль, поскольку могут вызывать динамическое изменение элементов веб-страницы.

Например, когда браузер завершает загрузку документа, происходит loadсобытие. Если пользователь нажимает кнопку на странице, clickсобытие произошло.

Многие события могут произойти один, несколько раз или никогда. Вы также можете не знать, когда произойдет событие, особенно если оно создано пользователем.

В этих сценариях вам понадобится обработчик событий, чтобы определять, когда происходит событие. Таким образом, вы можете настроить код, который будет реагировать на события, когда они происходят на лету.

JavaScript предоставляет обработчик событий в виде addEventListener()метода. Этот обработчик может быть прикреплен к определенному элементу HTML, события которого вы хотите отслеживать, и к этому элементу может быть прикреплено более одного обработчика.

addEventListener () Синтаксис

Вот синтаксис:

target.addEventListener(event, function, useCapture) 
  • target : HTML-элемент, в который вы хотите добавить обработчик событий. Этот элемент существует как часть объектной модели документа (DOM), и вы можете узнать, как выбрать элемент DOM.
  • событие : строка, определяющая название события. Мы уже упоминали loadи clickсобытия. Для любопытных вот полный список событий HTML DOM.
  • function : указывает функцию, запускаемую при обнаружении события. Это волшебство, которое позволяет вашим веб-страницам динамически изменяться.
  • useCapture : необязательное логическое значение (истина или ложь), указывающее, должно ли событие выполняться на фазе захвата или восходящей цепочки. В случае вложенных элементов HTML (например, imgвнутри a div) с присоединенными обработчиками событий это значение определяет, какое событие выполняется первым. По умолчанию для него установлено значение false, что означает, что первым выполняется самый внутренний обработчик событий HTML (фаза восходящей цепочки).

Пример кода addEventListener ()

Это простой пример, который я сделал, который показывает вам addEventListener()в действии.

Когда пользователь нажимает кнопку, отображается сообщение. Еще одно нажатие кнопки скрывает сообщение. Вот соответствующий JavaScript:

let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); }) 

Следуя синтаксису, показанному ранее для addEventListener():

  • цель : HTML-элемент сid='button'
  • функция : анонимная (стрелка) функция, которая устанавливает код, необходимый для отображения / скрытия сообщения
  • useCapture : оставлено значение по умолчаниюfalse

Моя функция может показывать / скрывать сообщение, добавляя / удаляя класс CSS под названием «показ», который изменяет видимость элемента сообщения.

Конечно, вы можете свободно настраивать эту функцию в своем коде. Вы также можете заменить анонимную функцию собственной именованной функцией.

Передача события как параметра

Иногда нам может потребоваться дополнительная информация о событии, например о том, какой элемент был нажат. В этой ситуации нам нужно передать параметр события нашей функции.

В этом примере показано, как получить идентификатор элемента:

button.addEventListener('click', (e)=>{ console.log(e.target.id) }) 

Здесь параметр события - это переменная с именем, eно ее можно легко назвать как угодно, например, «событие». Этот параметр представляет собой объект, который содержит различную информацию о событии, такую ​​как целевой идентификатор.

Вам не нужно делать ничего особенного, и JavaScript автоматически знает, что делать, когда вы передаете параметр в свою функцию таким образом.

Удаление обработчиков событий

Если по какой-то причине вы больше не хотите, чтобы обработчик событий активировался, вот как его удалить:

target.removeEventListener(event, function, useCapture); 

Параметры такие же, как addEventListener().

Практика ведет к совершенству

Лучший способ научиться работать с обработчиками событий - это попрактиковаться в собственном коде.

Вот пример проекта, который я сделал, в котором я использовал обработчики событий для изменения цвета, размера и скорости пузырьков, движущихся по фону веб-страницы (вам нужно будет щелкнуть центральную панель, чтобы открыть элементы управления).

Удачи и сделай что-нибудь классное!

Чтобы узнать больше о веб-разработке для новичков, посетите мой блог на 1000 Mile World и подпишитесь на меня в Twitter.