Остановка распространения событий: 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

JavaScript не в браузере: NodeJS, Deno и Bun

Начать стоит с того, что JavaScript может выполняться далеко не только в браузере. Для этого есть такая штука, как рантайм — это среда выполнения, которая обеспечивает все необходимое для выполнения JavaScript кода: движок языка, API среды и т.д.

Рантаймов несчётном множество, как и всего в мире JS, но в этом поговорим о самых интересных: NodeJS, Deno и Bun

👩‍💻 NodeJS — это рантайм JavaScript, построенный на движке V8 от Google Chrome. Он позволяет выполнять JavaScript-код на сервере. По сути, это почти то же самое, что и выполнять код в браузере, за тем лишь исключением, что NodeJS предоставляет API по работе с файлами, операционной системой, среду исполнения тестов и кучу всего ещё

— NodeJS сейчас — это основной рантайм для всех серверных решений на JavaScript и TypeScript
— npm (Node Package Manager) — это тоже про ноду

👩‍💻 Deno — более новый, чем NodeJS, рантайм, от создателя NodeJS. Deno разработан для того, чтобы устранить некоторые недостатки и ограничения ноды, улучшить безопасность и лучшей поддержкой TypeScript. В целом, всё так и есть, только лично мне субъективно кажется, что Deno почти никто не использует(

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

Краткий итог:

— NodeJS - это зрелая платформа с обширной экосистемой и большим сообществом
— Deno - альтернатива NodeJS с улучшенной безопасностью, поддержкой TypeScript и другими плюшками
— Bun - новая и перспективная платформа с упором на скорость и интеграцию различных инструментов

Лично я ставлю на то, что доминирующего рантайма пока что не будет, получится зоопарк, так как всем просто не угодить

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

@prog_way_blog — чат — #theory #javascript #typescript #useful