Frontend | Вопросы собесов on Telegram: “В чём разница между event.Preventdefault и event…”

В чём разница между event.Preventdefault и event.Stoppropagation ?
Спросят с вероятностью 7%

event.preventDefault() и event.stopPropagation() — это два метода, которые используются для управления поведением событий в JavaScript. Они выполняют разные задачи и полезны в различных сценариях.

event.preventDefault()

Предотвращает поведение браузера по умолчанию для события. Это может быть полезно, когда вы хотите отменить действие, которое обычно происходит при определенном событии.

Примеры:

1️⃣Отмена отправки формы:

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('Форма не отправлена!');
});

2️⃣Отмена перехода по ссылке:

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Переход по ссылке отменен!');
});

event.stopPropagation()

Предотвращает дальнейшее распространение события по дереву DOM. Это полезно, когда вы хотите остановить событие от всплытия (bubbling) или захвата (capturing) к родительским элементам.

Примеры:

1️⃣Остановка всплытия события:

document.querySelector('.child').addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('Клик на child');
});

document.querySelector('.parent').addEventListener('click', function() {
  console.log('Клик на parent');
});

В этом примере клик на .child элемент не вызовет обработчик клика на .parent элементе.

Сравнение

`event.preventDefault()`:
✅Предотвращает действие браузера по умолчанию.
✅Примеры: отмена отправки формы, отмена перехода по ссылке.
efault() и event.stopPropag
✅Останавливает дальнейшее распространение события по дереву DOM.
✅Примеры: остановка всплытия события от дочернего элемента к родительскому.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

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