Событие - важная часть . Веб-страница реагирует в соответствии с произошедшим событием. Некоторые события создаются пользователями, а некоторые - API. В этой статье мы увидим, как происходят события и как метод addEventListener в JavaScript используется в следующей последовательности:
c против c ++ против java
- Что такое прослушиватель событий?
- AddEventListener () в JavaScript
- Значения параметров
- AddEventListener в JavaScript: пример
Что такое прослушиватель событий?
Слушатель событий - это процедура в JavaScript, ожидающая наступления события. Простой пример мероприятие это пользователь, щелкающий мышью или нажимающий клавишу на клавиатуре.
В addEventListener () это встроенный Функция JavaScript который принимает событие, которое нужно прослушивать, и второй аргумент, который будет вызываться всякий раз, когда описанное событие запускается. К одному элементу можно добавить любое количество обработчиков событий без перезаписи существующих обработчиков событий.
addEventListener () в JavaScript
Некоторые из Особенности метода прослушивателя событий включают:
- В addEventListener () метод прикрепляет обработчик события к указанному элементу.
- Этот метод присоединяет обработчик событий к элементу без перезапись существующие обработчики событий.
- Можете добавить много обработчиков событий к одному элементу.
- Вы можете добавить множество обработчиков событий того же типа к одному элемент , т.е. два события «щелчок».
- Слушатели событий могут быть добавлены к любому ПРИГОВОР объект не только HTML-элементы. то есть объект окна.
- Метод addEventListener () делает его Полегче контролировать, как событие реагирует до пузырей.
При использовании метода addEventListener () JavaScript отделяется от разметка для лучшей читаемости и позволяет добавлять прослушиватели событий, даже если вы не управляете разметкой HTML.
Кроме того, вы можете легко удалить прослушиватель событий, используя removeEventListener () метод .
Синтаксис:
target.addEventListener (тип, прослушиватель [, параметры]) target.addEventListener (тип, прослушиватель [, useCapture]) target.addEventListener (тип, прослушиватель [, useCapture, wantUntrusted])
Значения параметров
| Параметр | Описание |
мероприятие | Необходимые. Строка, указывающая имя события. Примечание. Не используйте префикс «on». Например, используйте «щелчок» вместо «onclick». Список всех событий HTML DOM можно найти в нашем полном справочнике по объектам событий HTML DOM. |
функция | Необходимые. Задает функцию, запускаемую при возникновении события. Когда событие происходит, объект события передается функции в качестве первого параметра. Тип мероприятия объект зависит от указанного события. Например, событие «щелчок» принадлежит объекту MouseEvent. |
useCapture | Необязательный. Логическое значение, указывающее, должно ли событие выполняться в фазе захвата или в фазе восходящей цепочки. Возможные значения: true - обработчик события выполняется на этапе захвата. False - по умолчанию. Обработчик событий выполняется в фазе восходящей цепочки. |
Теперь, когда вы знаете, как работает прослушиватель событий, давайте взглянем на пример addEventListener () в JavaScript.
addEventListener () в JavaScript: пример
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gtВ этом примере метод addEventListener () используется для выполнения функции, когда пользователь нажимает кнопку. & lt / p & gt & ltbutton id = 'myBtn' & ltbutton id = 'myBtn' & ltbutton & lt; & lt; & lt; & lt; ('myBtn'). addEventListener ('click', myFunction) function myFunction () {document.getElementById ('demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt 
На этом мы подошли к концу этого addEventListener в JavaScript. Надеюсь, вы поняли, как слушатель событий метод работает в JavaScript.
Ознакомьтесь с нашими который включает в себя живое обучение под руководством инструктора и реальный проектный опыт. Это обучение позволит вам овладеть навыками работы с серверными и интерфейсными веб-технологиями. Он включает обучение веб-разработке, jQuery, Angular, NodeJS, ExpressJS и MongoDB.
Есть вопрос к нам? Пожалуйста, укажите это в разделе комментариев блога «addEventListener в JavaScript», и мы свяжемся с вами.