Спросят с вероятностью 10%
e.preventDefault() и e.stopPropagation() — это методы объекта события (
Event), используемые для управления поведением событий в веб-приложениях. Они позволяют контролировать стандартное поведение браузера и распространение событий в DOM-дереве.e.preventDefault()Предотвращает выполнение стандартного действия, ассоциированного с событием. Это может быть полезно во многих случаях, например, когда нужно остановить отправку формы по умолчанию при нажатии на кнопку submit, чтобы вместо этого обработать данные формы.
Пример:
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault(); // Предотвращает отправку формы
// Здесь может быть код для обработки данных формы
});
e.stopPropagation()Останавливает дальнейшее распространение события по DOM-дереву. В DOM события распространяются тремя фазами: захват (capturing), достижение целевого элемента (target), и всплытие (bubbling).
e.stopPropagation() предотвращает переход события к следующим обработчикам на текущей фазе и на других фазах.Пример:
document.querySelector('#child').addEventListener('click', function(e) {
e.stopPropagation(); // Останавливает распространение события клика дальше по DOM-дереву
console.log('Клик по дочернему элементу');
});
document.querySelector('#parent').addEventListener('click', function() {
console.log('Клик по родительскому элементу');
});В этом примере, несмотря на то что клик происходит и на дочернем, и на родительском элементе, благодаря
e.stopPropagation() в консоль будет выведено только сообщение от дочернего элемента.Зачем они нужны
-
e.preventDefault() используется для контроля над поведением браузера, чтобы предотвратить выполнение действий по умолчанию, что позволяет разработчикам реализовывать собственную логику обработки событий.-
e.stopPropagation() позволяет избежать нежелательного взаимодействия с другими обработчиками событий, расположенными выше или ниже по DOM-дереву, предотвращая таким образом возможные побочные эффекты от всплытия или захвата событий.Оба эти метода играют важную роль в создании интерактивных веб-приложений, давая точный контроль над поведением событий.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.
🔐 База собесов | 🔐 База тестовых