Різниця між event.preventdefault() та event.stoppropagation()
Головна Різниця
| Метод | Що він робить |
|---|---|
event.preventDefault() | Скасовує стандартну поведінку браузера |
event.stopPropagation() | Зупиняє спливання події через дерево DOM |
Їх часто використовують разом, але вони виконують різні завдання.
Що Робить "event.preventDefault()"
preventDefault() зупиняє стандартну поведінку, яку браузер виконує для конкретної події.
Приклад "event.preventDefault()"
html
<a href="https://google.com" id="link">Перейти</a>javascript
document.getElementById("link").addEventListener("click", (event) => {
event.preventDefault();
console.log("Навігацію скасовано");
});Посилання не відкриється, оскільки стандартна дія браузера скасована.
Що Робить "event.stopPropagation()"
stopPropagation() зупиняє спливання події вгору по дереву DOM — обробники батьків не будуть викликані.
Приклад "event.stopPropagation()"
html
<div id="parent">
<button id="child">Натисни на мене</button>
</div>javascript
document.getElementById("parent").addEventListener("click", () => {
console.log("Натискання на батька");
});
document.getElementById("child").addEventListener("click", (event) => {
event.stopPropagation();
console.log("Натискання на кнопку");
});Натискання на кнопку виведе лише: Натискання на кнопку
Обробник click батька не спрацює.
Що Якщо Ви Використаєте Обидва?
Іноді потрібно як скасувати поведінку, так і зупинити спливання:
javascript
element.addEventListener("submit", (event) => {
event.preventDefault(); // скасувати відправку форми
event.stopPropagation(); // запобігти досягненню події батька
});Важливо:
Обидва методи не є взаємозамінними — використовуйте кожен строго за його призначенням!
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.