Основы addEventListener
Назначайте элементам обработчики событий.
«Основы addEventListener» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Реакция на события
События позволяют коду реагировать на действия пользователя, такие как щелчки, нажатия клавиш и отправка форм. addEventListener — стандартный способ подписки.
Базовый синтаксис
Вызовите addEventListener, передав имя события и функцию-обработчик. Обработчик выполняется каждый раз, когда происходит событие.
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
console.log("Clicked!");
});Именованные обработчики
Можно передать именованную функцию. Это помогает организовать код и, что особенно важно, позволяет позднее удалить обработчик.
function handleClick() {
console.log("Clicked!");
}
btn.addEventListener("click", handleClick);Несколько обработчиков
В отличие от старого свойства onclick, можно назначить несколько обработчиков для одного события, не перезаписывая их.
btn.addEventListener("click", logClick);
btn.addEventListener("click", trackAnalytics);removeEventListener
Чтобы прекратить прослушивание, вызовите removeEventListener, передав то же самое имя события и ссылку на функцию, которые использовались при добавлении обработчика.
btn.addEventListener("click", handleClick);
btn.removeEventListener("click", handleClick);Анонимные функции нельзя удалить
Встроенная стрелочная функция при каждом вызове создаёт новую ссылку, поэтому позднее её нельзя удалить. Если удаление необходимо, используйте именованную ссылку.
btn.addEventListener("click", () => doThing());
// no way to remove this exact listenerПараметр однократного выполнения
Передача { once: true } автоматически удаляет обработчик после его однократного срабатывания.
btn.addEventListener("click", init, { once: true });Параметр захвата
По умолчанию обработчики выполняются во время фазы всплытия. { capture: true } заставляет их выполняться вместо этого во время фазы захвата.
parent.addEventListener("click", handler, { capture: true });Параметр пассивного режима
{ passive: true } означает, что Вы не будете вызывать preventDefault, благодаря чему браузер может оптимизировать производительность прокрутки.
window.addEventListener("scroll", onScroll, { passive: true });Параметр сигнала
Сигнал AbortController позволяет удалить один или несколько обработчиков с помощью отмены, что удобно при очистке.
const controller = new AbortController();
btn.addEventListener("click", handler, { signal: controller.signal });
controller.abort(); // removes the listenerКонтекст обработчика
В обработчике, заданном обычной функцией, this ссылается на элемент, к которому прикреплён обработчик. Стрелочные функции не переопределяют this.
btn.addEventListener("click", function () {
console.log(this); // the button element
});Быстрая проверка
Проверьте правила удаления.
Итоги
addEventListener(type, handler, options) подписывает на события и поддерживает несколько обработчиков. Удаляйте их с помощью removeEventListener, используя ту же ссылку, поэтому предпочтительны именованные функции. Полезные параметры включают once, capture, passive и signal. В обработчиках, заданных обычными функциями, this — целевой элемент.
Часто задаваемые вопросы
Урок «Основы addEventListener» бесплатный?
Да — полный текст урока «Основы addEventListener» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Основы addEventListener»?
Назначайте элементам обработчики событий. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Основы addEventListener»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Основы addEventListener
- Объект события
- preventDefault и stopPropagation
- События клавиатуры и мыши