← Назад ко всем вопросам

В чем разница между StopPropagation и StopImmidiatePropagation

1️⃣ Как кратко ответить

stopPropagation предотвращает дальнейшее распространение события в фазе захвата или всплытия, но не останавливает выполнение других обработчиков на текущем элементе. stopImmediatePropagation останавливает не только распространение события, но и выполнение всех последующих обработчиков на текущем элементе.

2️⃣ Подробное объяснение темы

В JavaScript события могут распространяться по дереву DOM в двух фазах: захват (capture) и всплытие (bubble). Когда событие происходит, оно сначала проходит через фазу захвата, начиная с корневого элемента и доходя до целевого элемента, а затем через фазу всплытия, возвращаясь обратно к корню.

Иногда возникает необходимость контролировать это распространение. Для этого используются методы stopPropagation и stopImmediatePropagation.

stopPropagation

Метод stopPropagation используется для предотвращения дальнейшего распространения события в фазе захвата или всплытия. Однако, он не останавливает выполнение других обработчиков события, которые уже назначены на текущий элемент.

Пример:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Propagation</title>
</head>
<body>
    <div id="parent" style="padding: 20px; background-color: lightblue;">
        Parent
        <button id="child">Child</button>
    </div>
​
    <script>
        const parent = document.getElementById('parent');
        const child = document.getElementById('child');
​
        parent.addEventListener('click', () => {
            console.log('Parent clicked');
        });
​
        child.addEventListener('click', (event) => {
            console.log('Child clicked');
            event.stopPropagation(); // Останавливает распространение события
        });
​
        child.addEventListener('click', () => {
            console.log('Another child handler');
        });
    </script>
</body>
</html>
  • При клике на кнопку "Child" в консоль выведется "Child clicked" и "Another child handler".
  • stopPropagation остановит распространение события, и "Parent clicked" не будет выведено.
  • Однако, второй обработчик на элементе "Child" все равно выполнится.

stopImmediatePropagation

Метод stopImmediatePropagation останавливает не только дальнейшее распространение события, но и предотвращает выполнение всех последующих обработчиков на текущем элементе.

Пример:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Propagation</title>
</head>
<body>
    <div id="parent" style="padding: 20px; background-color: lightblue;">
        Parent
        <button id="child">Child</button>
    </div>
​
    <script>
        const parent = document.getElementById('parent');
        const child = document.getElementById('child');
​
        parent.addEventListener('click', () => {
            console.log('Parent clicked');
        });
​
        child.addEventListener('click', (event) => {
            console.log('Child clicked');
            event.stopImmediatePropagation(); // Останавливает распространение и выполнение других обработчиков
        });
​
        child.addEventListener('click', () => {
            console.log('Another child handler');
        });
    </script>
</body>
</html>
  • При клике на кнопку "Child" в консоль выведется только "Child clicked".
  • stopImmediatePropagation остановит как распространение события, так и выполнение второго обработчика на элементе "Child".

Применение

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

Тема: Браузер: DOM, события и модель
Стадия: Tech

🔒 Подпишись на бусти автора и стань Алигатором, чтобы получить полный доступ к функционалу сайта и отслеживать свой прогресс!

Твои заметки