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

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

Что такое событийно-ориентированное программирование?

Программирование, управляемое событиями, — это название парадигмы, которая полагается на выполнение события для выполнения своих функций. Программу, управляемую событиями, можно создать на любом языке программирования высокого уровня. Но программирование, управляемое событиями, наиболее распространено в таких языках, как JavaScript, которые интегрируются с пользовательским интерфейсом.

Что такое прослушиватель событий?

Прослушиватель событий — это функция, которая инициирует предопределенный процесс, если происходит определенное событие. Таким образом, прослушиватель событий «слушает» действие, а затем вызывает функцию, которая выполняет связанную задачу. Это событие может принимать одну из многих форм. Общие примеры включают события мыши, события клавиатуры и события окна.

Создание прослушивателя событий с использованием JavaScript

Вы можете слушать события на любом элемент в DOM. JavaScript имеет добавить прослушиватель событий () функция, которую вы можете вызвать для любого элемента на веб-странице. То добавить прослушиватель событий () функция – это метод Цель события интерфейс. Все объекты, поддерживающие события, реализуют этот интерфейс. Это включает в себя окно, документ и отдельные элементы на странице.

Функция addEventListener() имеет следующую базовую структуру:

element.addEventListener («событие», functionToExecute);

Где:

• в элемент может представлять любой тег HTML (от кнопки до абзаца)
• в "событие" это строка, именующая конкретное распознаваемое действие
• в функцияToExecute является ссылкой на существующую функцию

Давайте создадим следующую веб-страницу с несколькими элементами HTML:

Добро пожаловать


 Здравствуйте, добро пожаловать на мой сайт.


Выучить больше





Информация о пользователе

Имя пользователя: 

Представлять на рассмотрение

Приведенный выше HTML-код создает простую страницу, которая ссылается на файл JavaScript с именем app.js. То app.js файл будет содержать код для настройки прослушивателей событий. Итак, если вы хотите инициировать определенный процесс всякий раз, когда пользователь нажимает первую кнопку на веб-странице, это файл для его создания.

Файл app.js

document.querySelector('.btn').addEventListener("щелчок", clickDemo)
функция clickDemo () {
 console.log("Привет")
}

Приведенный выше код JavaScript обращается к первой кнопке на странице с помощью селектор запросов() функция. Затем он добавляет прослушиватель событий к этому элементу, используя метод добавить прослушиватель событий () метод. Конкретное событие, которое он прослушивает, называется «щелчок». Когда кнопка запускает это событие, слушатель вызовет кликДемо() функция.

Связанный: Узнайте, как использовать селекторы DOM

То кликДемо() Функция выводит «Привет!» в консоль браузера. Каждый раз, когда вы нажимаете кнопку, вы должны видеть этот вывод в своей консоли.

Вывод события «щелчок»

Что такое события мыши?

JavaScript имеет Событие мыши интерфейс, который представляет события, происходящие из-за взаимодействия пользователя с мышью. Несколько событий используют Событие мыши интерфейс. Эти события включают следующее:

• нажмите
• двойной клик
• движение мыши
• наведение мыши
• мышь
• мышь
• наведение мыши

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

Другим распространенным событием мыши является двойной клик, что означает двойной щелчок. Это срабатывает, когда пользователь дважды быстро щелкает кнопку мыши. Замечательная вещь о добавить прослушиватель событий () Функция заключается в том, что вы можете использовать ее для назначения нескольких прослушивателей событий одному элементу.

Добавление события dblclick к первой кнопке

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
функция dblclickDemo(){
 alert("Это демонстрация создания события двойного щелчка")
}

Добавление приведенного выше кода в файл app.js эффективно создаст второй прослушиватель событий для первой кнопки на веб-странице. Таким образом, двойное нажатие первой кнопки создаст в браузере следующее предупреждение:

На изображении выше вы увидите сгенерированное предупреждение, а также увидите, что в консоли есть еще два вывода «Привет». Это связано с тем, что событие двойного щелчка представляет собой комбинацию двух событий щелчка, и существуют прослушиватели событий для обоих событий. нажмите и двойной клик Мероприятия.

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

Что такое события клавиатуры?

JavaScript имеет Событие Клавиатуры интерфейс. Это прослушивает взаимодействие между пользователем и его клавиатурой. В прошлом, Событие Клавиатуры имел три типа событий. Однако с тех пор JavaScript устарел. нажатие клавиши событие.

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

Возвращаясь к приведенному выше примеру HTML, лучшее место для добавления прослушивателя событий клавиатуры — это Вход элемент.

Добавление прослушивателя событий клавиатуры в файл app.js

пусть приветствия = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
функция захвата ввода (е) {
 Greetings.innerText = (`Здравствуйте, ${e.target.value}, добро пожаловать на мой сайт.`)
}

В приведенном выше коде используется селектор запросов() функция для доступа к абзацу и Вход элементы на странице. Затем он вызывает добавить прослушиватель событий () метод на Вход элемент, который прослушивает ключ событие. Всякий раз, когда ключ происходит событие, т. захватВвод() Функция принимает значение ключа и добавляет его к абзацу на странице. То е Параметр представляет событие, которое JavaScript назначает автоматически. Этот объект события имеет свойство target, которое является ссылкой на элемент, с которым взаимодействовал пользователь.

В этом примере этикетка, прикрепленная к Вход поле запрашивает имя пользователя. Если вы введете свое имя в поле ввода, веб-страница будет выглядеть примерно так:

Абзац теперь содержит входное значение, которое в приведенном выше примере — «Джейн Доу».

addEventListener фиксирует все виды взаимодействия с пользователем

Эта статья познакомила вас с добавить прослушиватель событий () метод, а также несколько событий мыши и клавиатуры, которые вы можете использовать с ним. На данный момент вы знаете, как прослушивать определенное событие и как создать функцию, которая на него реагирует.

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

Понимание распространения событий в JavaScript

События — это мощная функция JavaScript. Понимание того, как веб-браузер сравнивает их с элементами, является ключом к освоению их использования.

Читать дальше

Об авторе