Готовлюсь к собеседованиям и систематизирую знания. Сегодня разбираем разницу между event.preventDefault() и event.stopPropagation().

Метод event.preventDefault() отключает поведение элемента по умолчанию. Если использовать этот метод внутри обработчика формы, то он предотвратит ее отправку на сервер. Если применить его к контекстному меню, то правая кнопка мыши перестанет показывать стандартное меню браузера.

Метод event.stopPropagation() работает иначе — он останавливает распространение события по DOM-дереву. Если вызвать его внутри обработчика на дочернем элементе, событие не дойдет до родительских элементов и их обработчики не сработают.

Простой пример: представьте ссылку внутри блока. У ссылки есть стандартное поведение — переход по адресу. У блока — свой обработчик клика. Если использовать preventDefault() на ссылке, переход не произойдет, но событие всплывет до блока и его обработчик выполнится. Если же использовать stopPropagation(), переход по ссылке произойдет, но обработчик блока уже не сработает.

Есть также метод event.stopImmediatePropagation(), который не только останавливает всплытие, но и предотвращает выполнение других обработчиков на этом же элементе.

#javascript #frontend #собеседования #вопросы_для_собеседования #войтивайти