progway — программирование, IT

Остановка распространения событий: event.stopPropogation и event.stopImmediatePropagation()

Итак, эти методы используются для управления событиями в JavaScript. Сначала разберём каждый из них по отдельности:

🟢event.stopPropagation()

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

document.getElementById('child').addEventListener('click', event => {
    event.stopPropagation();
    console.log('Ребёнок');
});

document.getElementById('parent').addEventListener('click', () => {
    console.log('Родитель');
});

Так как мы используем event.stopPropogation(), в консоли мы увидим только Ребёнок. Без использования этого метода, мы увидим вывод: Ребёнок, Родитель

🟢event.stopImmediatePropagation()

Этот метод не только предотвращает дальнейшее распространение события к родителям, но и останавливает выполнение других обработчиков событий на том же элементе. Рассмотрим пример:

const element = document.getElementById('child')

element.addEventListener('click', event => {
    event.stopImmediatePropagation();
    console.log('Первый обработчик нажатия');
});

element.addEventListener('click', () => {
    console.log('Второй обработчик нажатия');
});

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

Коротко о главном:

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

В этом посте в качестве эксперимента сделал блок "коротко о главном", чтобы проще было усваивать материал и не приходилось читать очень длинные посты, если тема вам оказалась неинтересна. Накидайте 🔥 если этот блок — пушка-гонка, а я постараюсь добавлять его чаще

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #theory #code #javascript

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥42👍11❤2🐳2

www.tgoop.com/prog_way_blog/312

1.55K viewsJun 26, 2024 at 10:19

Остановка распространения событий: event.stopPropogation и event.stopImmediatePropagation()

Итак, эти методы используются для управления событиями в JavaScript. Сначала разберём каждый из них по отдельности:

🟢event.stopPropagation()

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

document.getElementById('child').addEventListener('click', event => {
    event.stopPropagation();
    console.log('Ребёнок');
});

document.getElementById('parent').addEventListener('click', () => {
    console.log('Родитель');
});

const element = document.getElementById('child')

element.addEventListener('click', event => {
    event.stopImmediatePropagation();
    console.log('Первый обработчик нажатия');
});

element.addEventListener('click', () => {
    console.log('Второй обработчик нажатия');
});

Коротко о главном:

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