addEventListener и объект события
Подключайте обработчики событий, получайте объект Event, используйте preventDefault и stopPropagation и изучайте всплытие событий.
«addEventListener и объект события» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Что такое события
События — это сигналы, которые браузер отправляет, когда что-то происходит: пользователь щёлкает мышью, нажимает клавишу или перемещает мышь, страница загружается, завершается сетевой запрос. JavaScript реагирует на события, добавляя обработчики событий.
Синтаксис addEventListener
element.addEventListener(type, handler) добавляет функцию, которая будет выполняться при возникновении события. Обработчик получает объект Event с подробностями о произошедшем.
const button = document.querySelector('#submit');
button.addEventListener('click', (event) => {
console.log('Button clicked!', event);
});Распространённые типы событий
Мышь: click, dblclick, mouseenter, mouseleave, mousemove. Клавиатура: keydown, keyup, keypress. Формы: submit, input, change, focus, blur. Документ: DOMContentLoaded, load. Окно: resize, scroll.
// Form events:
input.addEventListener('input', (e) => console.log(e.target.value));
form.addEventListener('submit', handleSubmit);
// Window events:
window.addEventListener('resize', () => console.log(window.innerWidth));Объект события
Каждый обработчик получает объект Event. Основные свойства: e.target (элемент, вызвавший событие), e.currentTarget (элемент, на котором установлен обработчик), e.type (название события), e.timeStamp.
document.addEventListener('click', (e) => {
console.log(e.type); // 'click'
console.log(e.target); // element that was clicked
console.log(e.currentTarget); // element with the listener (document)
console.log(e.timeStamp); // ms since page load
});preventDefault()
event.preventDefault() отменяет стандартное действие браузера. Используйте его, чтобы предотвратить отправку формы, переход по ссылке или открытие контекстного меню по правому щелчку в играх.
form.addEventListener('submit', (e) => {
e.preventDefault(); // stop page reload
// validate and process form data with JavaScript
});
link.addEventListener('click', (e) => {
e.preventDefault(); // handle SPA navigation manually
router.navigate(e.target.href);
});stopPropagation()
event.stopPropagation() останавливает всплытие события по дереву DOM. Используйте его, если обработчик внутреннего элемента не должен запускать обработчик внешнего элемента.
modal.addEventListener('click', (e) => {
e.stopPropagation(); // don't close modal when clicking inside it
});
document.addEventListener('click', () => {
closeModal(); // only fires for clicks outside modal
});Всплытие событий
События всплывают вверх: после срабатывания на целевом элементе они происходят на родителе, затем на прародителе и так далее вплоть до document. Так работает делегирование событий: установите один обработчик на родителе и используйте e.target, чтобы определить фактически нажатый дочерний элемент.
// One listener handles all button clicks in the container:
document.querySelector('.btn-group').addEventListener('click', (e) => {
if (e.target.matches('button')) {
console.log('Clicked:', e.target.textContent);
}
});Шаблон делегирования событий
Делегирование событий — это практика установки обработчика на родительском элементе вместо добавления обработчиков каждому дочернему элементу. Это эффективнее и автоматически работает с динамически добавленными дочерними элементами.
// Instead of:
list.querySelectorAll('li').forEach(li => li.addEventListener('click', handleClick));
// Use delegation:
list.addEventListener('click', (e) => {
if (e.target.closest('li')) handleClick(e);
});События клавиатуры
События клавиатуры происходят при нажатии клавиш. В современном коде используйте e.key (строку вроде 'Enter', 'Escape' или 'a'). В старом коде использовалось e.keyCode (устарел). Свойства e.metaKey, e.ctrlKey и e.shiftKey определяют нажатые клавиши-модификаторы.
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
if (e.key === 'Enter' && e.ctrlKey) submitForm();
});Удаление обработчиков событий
Используйте removeEventListener, чтобы удалить обработчик. Обработчик должен ссылаться на ту же функцию — анонимные функции удалить нельзя. В React и Vue обычно не требуется управлять этим вручную.
function handleScroll() { /* ... */ }
window.addEventListener('scroll', handleScroll);
// Later, when done:
window.removeEventListener('scroll', handleScroll);Параметр once
Передайте { once: true } третьим аргументом, чтобы автоматически удалить обработчик после его первого срабатывания. Это полезно для одноразовых действий, например закрытия заставки.
document.querySelector('#start').addEventListener('click', startApp, { once: true });Параметр capture
По умолчанию обработчики срабатывают на этапе всплытия (вверх). Передайте { capture: true }, чтобы обработчик срабатывал на этапе погружения (вниз, до собственных обработчиков целевого элемента).
Быстрая проверка
Какой метод запрещает браузеру выполнять стандартное действие для события?
Повторение: события DOM
addEventListener(type, handler) добавляет обработчики. Объект Event предоставляет target, type и методы управления. preventDefault() отменяет стандартные действия. stopPropagation() останавливает всплытие. Используйте делегирование событий для повышения эффективности и работы с динамическими дочерними элементами. Удаляйте обработчики, чтобы предотвращать утечки памяти.
Часто задаваемые вопросы
Урок «addEventListener и объект события» бесплатный?
Да — полный текст урока «addEventListener и объект события» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «addEventListener и объект события»?
Подключайте обработчики событий, получайте объект Event, используйте preventDefault и stopPropagation и изучайте всплытие событий. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «addEventListener и объект события»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- querySelector и querySelectorAll
- addEventListener и объект события
- Изменение содержимого: textContent, innerHTML, classList
- Создание и добавление элементов