Этот вопрос проверяет знание механизма всплытия и перехвата событий.
stopPropagation() — останавливает всплытие события (но другие обработчики на этом же элементе сработают).
stopImmediatePropagation() — останавливает всплытие и все остальные обработчики на этом элементе.
Пример:
const div = document.querySelector("div");
div.addEventListener("click", (event) => {
console.log("Первый обработчик");
event.stopPropagation(); // Остановит всплытие, но второй обработчик сработает
});
div.addEventListener("click", (event) => {
console.log("Второй обработчик"); // Всё равно выполнится
});
document.body.addEventListener("click", () => {
console.log("Не сработает (всплытие остановлено)");
});С stopImmediatePropagation():
div.addEventListener("click", (event) => {
console.log("Первый обработчик");
event.stopImmediatePropagation(); // Остановит всё
});
div.addEventListener("click", () => {
console.log("Этот код не выполнится");
});Когда использовать:
stopPropagation() — когда нужно запретить всплытие, но дать шанс другим обработчикам на этом элементе.
stopImmediatePropagation() — когда нужно полностью отменить все последующие обработчики (например, для приоритетных событий).
Важно: Ни один из методов не отменяет действие браузера по умолчанию (для этого есть event.preventDefault()).