Рубрики
Без рубрики

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

Метод JavaScript AddeventListener () позволяет настроить функции, которые будут называться, когда указанное событие происходит, например, когда пользователь нажимает кнопку. В этом руководстве показано вам, как вы можете реализовать addeventListener () в вашем коде. События событий и обработчиков событий и событий являются действиями, которые происходят, когда

Автор оригинала: FreeCodeCamp Community Member.

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

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

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

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

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

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

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

addeventListener () синтаксис

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

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

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

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

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

let button = document.querySelector('#button');
let msg = document.querySelector('#message');

button.addEventListener('click', ()=>{
  msg.classList.toggle('reveal');
})

Проходя синтаксисом, показанным ранее для addeventListener () :

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

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

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

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

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

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

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

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

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

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

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

target.removeEventListener(event, function, useCapture);

Параметры такие же, как addeventListener () Отказ

Практика делает идеально

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

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

Веселиться и пойти сделать что-то потрясающее!

Для получения дополнительных знаний о новичке веб-разработки посетите мой блог на 1000 миль мила И следуй за мной на Twitter Отказ

Читайте ещё по теме: