Frontend | Вопросы собесов

Для чего нужны E.Preventdefault() и e.Stopprepagination() ?

Спросят с вероятностью 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. Ставь 👍 если нравится контент.



🔐 База собесов | 🔐 База тестовых