Будь-який розробник рано чи пізно стикається з необхідністю “зловити” подію, виконати якусь свою логіку та зупинити подальшу роботу цієї події.
І річ у тім, що існує два сценарії, в яких подія може продовжитись: це спливання події вгору по DOM та виконання стандартної поведінки елемента.
Найкращий приклад — будь-яка кнопка у формі. Найперша проблема, з якою ми стикнемося, якщо просто навісимо event listener — наш код виконається, але відразу по тому сторінку буде автоматично перезавантажено. Бо така от поведінка у будь-якої кнопки у формі — відправляти дані форми на сервер, незалежно від того, хочемо ми цього чи ні.
Тут у нагоді стане старий добрий метод Event.preventDefault, який каже бравзеру відкинути стандартну поведінку елемента — тобто зупиняє виконання події за замовчуванням.
А якщо у нас із якоїсь причини на вкладених елементах однакові слухачі (наприклад, слухаємо клік на батьківському й дочірньому елементі), то на поміч прийде Event.stopPropagation — метод, який зупиняє просування події вгору по DOM.
До речі, є ще радикальніший спосіб зупинити виконання event listeners — це Event.stopImmediatePropagation, який скасовує виконання наступних слухачів тієї ж події на тому ж елементі.
Знати різницю між цими методами критично важливо, щоби уникнути дивної поведінки у формах, модалках чи складних компонентах. Ну і аби не писати, як я свого часу, коли ніяк не міг запамʼятати, хто з них що робить:
el.addEventListener(event => {
event.stopPropagation();
event.preventDefault();
});MDN: Event.stopPropagation
MDN: Event.stopImmediatePropagation
MDN: Event.preventDefault
А ви як, досі плутаєтесь в цих методах, як я, чи нарешті запамʼятали різницю? Розкажіть в коментарях!
@babichdev
***
Збір на РЕБ для 109 ОГШБ 10 ОГШБр «Едельвейс» триває, і ми прямуємо до мети в 100 000 грн! Нагадую, кожні 50 грн — шанс виграти подарунок і допомогти ЗСУ.