Что такое слушатель событий?
Слушатель событий – это функция в JavaScript, которая ожидает событие и отвечает на него. JavaScript – это язык программирования, который используют разработчики для создания интерактивных веб-страниц. С помощью функции слушателя событий JavaScript можно создавать собственные реакции на такие события, как щелчки мыши, нажатия на клавиатуру и изменение размера окна. Парадигма программирования, предполагающая ожидание событий в реальном времени и реагирование на них, называется обработкой событий.
В чем заключается синтаксис функции слушателя событий?
Функция слушателя событий обладает теми же характеристиками, что и другие функции JavaScript. При активации эта функция выполняет необходимые действия для обработки события. Например, благодаря функции слушателя событий можно изменять отображаемый текст, собирать информацию из регистрационных форм или хранить данные в базах данных.
Синтаксис слушателя событий
Функция слушателя событий соответствует правильному синтаксису JavaScript, как в следующем примере.
function RespondMouseClick() {
document.getElementById("textdisplay1").innerHTML += "MouseClick happened" ;
}
В этом примере показана функция слушателя событий RespondMouseClick. Обычно название функции пишется так, чтобы оно соответствовало назначению слушателя событий. В функции вы пишете коды для выполнения определенных действий при наступлении события. В этом примере функция добавляет текст MouseClick happened к HTML-элементу textdisplay1.
Синтаксис обработчика событий
В качестве альтернативы вы можете использовать функцию обработчика событий для ответа на активированное событие, как показано в следующем примере.
function eventHandler(event) {
if (event.type === "fullscreenchange") {
console.log (“full screen toggle”);
} else {
console.log (“full screen error”);
}
}
Таким образом, вы можете управлять несколькими типами событий от определенного элемента с помощью одной функции.
Например, вы можете зарегистрировать слушатель событий для обработки всех типов событий блокчейна в приложениях, основанных на событиях. Дополнительные сведения см. в статье о создании приложения, основанного на событиях, с помощью Управляемого блокчейна Amazon.
Как добавить слушатель событий?
Слушатель событий будет активирован только после добавления его в соответствующий элемент JavaScript. Для этого вы можете использовать следующий синтаксис:
- element.addEventListener(event, listener);
- element.addEventListener(event, listener, useCapture);
- element.addEventListener(event, listener, options);
Например, разработчики могут вызвать следующую функцию, чтобы привязать слушатель событий нажатия к элементу кнопки.
btn.addEventListener("click", RespondMouseClick);
Можно также добавить несколько слушателей событий к определенному объекту события, не перезаписывая существующие обработчики событий.
Например, Amazon Web Services (AWS) позволяет разработчикам объединять несколько обратных вызовов для объекта AWS.Request. Дополнительные сведения см. в статье о том, как использовать слушатель событий объекта запросов на AWS.
Параметры добавления событий
Ниже приведено объяснение параметров из предыдущего синтаксиса.
- Параметр event – это любое допустимое событие JavaScript, такое как щелчок, изменение, наведение курсора мыши, нажатие клавиши и загрузка.
- Параметр listener – это обратный вызов события или функция JavaScript, созданная для ответа на определенные события.
- Параметр useCapture – это дополнительный параметр, указывающий режим распространения событий. Он принимает логические значения, где true активирует перехват, а false – всплытие. По умолчанию для этого параметра установлено значение false.
- Параметр options состоит из нескольких дополнительных значений, включая сигналы режима перехвата и отклонения, которые отражают поведение слушателя.
Как удалить слушатель событий?
Слушатели событий остаются активными до тех пор, пока вы не удалите их из связанных элементов JavaScript. Для этого можно использовать следующий синтаксис.
element.removeEventListener(type, listener, useCapture);
Параметры удаления слушателя событий аналогичны параметрам, которые вы используете для его добавления. При удалении слушателя событий необходимо указать те же параметры типа, слушателя и useCapture. Если этого не сделать, слушатель событий будет оставаться активным и продолжать срабатывать для будущих событий.
Например, вы можете добавить событие с помощью следующего кода.
button.addEventListener("click", RespondMouseClick, true);
Однако при применении следующего кода не удается удалить слушателя событий. Это связано с тем, что значение useCapture отличается от значения, зарегистрированного в объекте кнопки.
button.removeEventListener("click", RespondMouseClick, false);
Чтобы успешно удалить событие и предотвратить его запуск, вы можете использовать следующий код.
button.removeEventListener("click", RespondMouseClick, true);
Как работают функции вложенного слушателя событий?
Вложенные слушатели событий – это обработчики событий, добавленные к элементам HTML на разных иерархических уровнях.
В следующем примере HTML документ является владельцем родительского элемента, а родительский элемент – дочернего.
<div class="document">
<div class="parent">
<div class="child"></div>
</div>
</div>
В сложных веб-приложениях может быть несколько родительских и дочерних слоев с соответствующими функциями слушателей событий. Когда происходит определенное событие, слушатели событий запускаются на разных уровнях в определенном порядке. Например, при нажатии на дочернюю кнопку событие будет распространяться на все обработчики, которые фиксируют нажатие мыши.
События могут распространяться в двух режимах: всплытия и перехвата.
Всплытие события
Всплытие – это режим обработки событий JavaScript по умолчанию. Он распространяет событие от самого внутреннего слоя к самому внешнему.
Например, пользователь может навести курсор на текстовое поле в дочернем разделе. Затем приложение может передать событие в следующем порядке:
- Слушатель событий в дочернем объекте обрабатывает событие наведения мыши.
- Затем родительский слушатель событий обрабатывает событие и передает управление слушателю событий документа.
Чтобы настроить всплытие событий, используйте следующий синтаксис:
- element.addEventListener(event, listener, [false]);
- element.addEventListener(event, listener);
Перехват событий
Перехват событий – это специальный режим обработки событий в JavaScript, при котором событие распространяется внутрь из самого внешнего слоя. Как только событие достигает целевого элемента во внутреннем слое, режим обработки событий переходит в режим всплытия. Затем в результате всплытия событие распространяется наружу до самого верхнего слоя.
Например, пользователь может нажать на дочернюю кнопку и запустить следующую последовательность действий:
- Событие щелчка мыши обрабатывает слушатель событий документа, а затем – родительский обработчик событий.
- Событие достигает целевого элемента – кнопки. Событие обрабатывает слушатель событий кнопки.
- Обработка событий переключается из режима записи в режим всплытия.
- То же событие щелчка мыши запускает обработчик события на родительском объекте, а затем переходит к документу.
Как выбрать между всплытием и перехватом
Всплытие и перехват позволяют по-разному управлять событиями. Режим всплытия используется редко, поскольку перехвата достаточно для обработки большинства событий в приложениях.
Выбирая между всплытием и перехватом, следует учитывать процесс распространения событий и его соответствие логике программирования вашего приложения.
Например, рассмотрим родительскую форму, состоящую из двух дочерних элементов. Первый элемент требует немедленного обновления при возникновении события во втором элементе. В этом случае вам следует использовать режим перехвата. Благодаря ему родительский слушатель событий обрабатывает событие и обновляет первый элемент. Затем он передает управление слушателю событий на втором дочернем элементе.
Как остановить распространение событий в функциях вложенных слушателей событий?
События передаются до тех пор, пока не достигнут конечного адресата в виде вложенного слушателя. Чтобы предотвратить дальнейшее распространение события, необходимо использовать определенные методы.
Следующий метод останавливает событие в слушателе событий.
event.stopPropagation();
Например, если вы вызовете StopPropagation дочерней кнопкой, событие щелчка мыши не распространится на родительский уровень и уровень документа. Таким образом, слушатели мероприятий более высокого уровня не будут активированы.
Остановить распространение всех событий
StopPropagation останавливает распространение событий только текущего типа. Если в объекте зарегистрированы разные типы слушателей событий, они все равно срабатывают, несмотря на вызов команды StopPropagation.
Чтобы остановить все события, связанные с определенным объектом, вы можете использовать метод StopImmediatePropagation следующим образом.
event.stopImmediatePropagation();
Когда один слушатель событий вызывает StopImmediatePropagation, другие слушатели, связанные с объектом, не запускаются.
Как AWS обеспечивает соответствие вашим требованиям к JavaScript?
Amazon Web Services (AWS) предлагает SDK AWS для JavaScript, чтобы вы могли легко использовать сервисы в своих приложениях с помощью библиотек и API.
SDK можно использовать для разработки серверных, веб- и мобильных веб-приложений. SDK поддерживает среды выполнения JavaScript, Node.JS и React Native, а также их сочетания. Благодаря этому разработчики могут запускать один и тот же пакет сервисов клиента на разных платформах.
Ниже приведены другие преимущества использования SDK.
- SDK написан на языке TypeScript. Таким образом обеспечиваются такие преимущества, как статическая проверка типов и поддержка классов и модулей.
- В SDK есть стек промежуточного программного обеспечения, который позволяет вводить настраиваемые действия.
- SDK обладает модульной архитектурой. Благодаря этому вы можете использовать только необходимые пакеты для оптимизации производительности приложения.
Начните работу с приложениями JavaScript, зарегистрировав аккаунт AWS сегодня.
AWS: дальнейшие шаги
Получите мгновенный доступ к уровню бесплатного пользования AWS.
