preventDefault и stopPropagation
Управляйте поведением по умолчанию и всплытием событий.
«preventDefault и stopPropagation» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Управление поведением событий
Событиями можно управлять двумя способами: остановить действие браузера по умолчанию и остановить прохождение события через DOM.
Действия по умолчанию
У многих элементов есть встроенное поведение по умолчанию: ссылки переходят по адресам, отправка формы перезагружает страницу, а флажки переключаются. Это происходит, пока Вы не вмешаетесь.
preventDefault
event.preventDefault отменяет действие браузера по умолчанию, но при этом позволяет Вашему обработчику выполниться.
link.addEventListener("click", (e) => {
e.preventDefault(); // stop navigation
console.log("handled in JS");
});preventDefault в формах
Обычно этот метод используют, чтобы форма не перезагружала страницу и чтобы можно было обработать отправку с помощью JavaScript.
form.addEventListener("submit", (e) => {
e.preventDefault();
// send data via fetch instead
});Распространение событий
После достижения цели события всплывают вверх через предков, вызывая их обработчики. Поэтому щелчок по дочернему элементу может вызвать обработчик родителя.
stopPropagation
event.stopPropagation не позволяет событию продолжить путь к предкам. Текущий обработчик всё равно завершает работу.
child.addEventListener("click", (e) => {
e.stopPropagation(); // parent listeners will not fire
});preventDefault и stopPropagation
Это независимые механизмы. preventDefault отменяет действие браузера, а stopPropagation прекращает распространение события к другим элементам. Можно использовать любой из них, оба или ни одного.
e.preventDefault(); // no default action
e.stopPropagation(); // no bubblingДругие обработчики того же элемента
stopPropagation НЕ останавливает выполнение других обработчиков того же элемента. Они всё равно сработают.
el.addEventListener("click", (e) => e.stopPropagation());
el.addEventListener("click", () => console.log("still runs"));stopImmediatePropagation
stopImmediatePropagation действует ещё сильнее: он останавливает всплытие И предотвращает выполнение всех оставшихся обработчиков того же элемента.
el.addEventListener("click", (e) => e.stopImmediatePropagation());
el.addEventListener("click", () => console.log("does NOT run"));defaultPrevented
Можно проверить event.defaultPrevented, чтобы узнать, был ли ранее вызван preventDefault другим обработчиком.
el.addEventListener("click", (e) => {
console.log(e.defaultPrevented);
});Используйте экономно
Остановка распространения может нарушить делегирование событий в другой части страницы. Используйте её только при настоящей необходимости и рассмотрите альтернативы, совместимые с делегированием.
Быстрая проверка
Выберите правильный метод.
Итоги
preventDefault отменяет действие браузера по умолчанию (переход, отправку формы и т. д.). stopPropagation останавливает всплытие события к предкам, а stopImmediatePropagation также блокирует другие обработчики того же элемента. Это независимые инструменты; используйте остановку распространения экономно, чтобы не нарушить делегирование.
Часто задаваемые вопросы
Урок «preventDefault и stopPropagation» бесплатный?
Да — полный текст урока «preventDefault и stopPropagation» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «preventDefault и stopPropagation»?
Управляйте поведением по умолчанию и всплытием событий. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «preventDefault и stopPropagation»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Основы addEventListener
- Объект события
- preventDefault и stopPropagation
- События клавиатуры и мыши