Остановка распространения событий: event.stopPropogation и event.stopImmediatePropagation()
Итак, эти методы используются для управления событиями в JavaScript. Сначала разберём каждый из них по отдельности:
🟢 event.stopPropagation()
Этот метод предотвращает дальнейшее распространение события в фазе захвата или всплытия. Это значит, что событие сработает только на
Так как мы используем
🟢 event.stopImmediatePropagation()
Этот метод не только предотвращает дальнейшее распространение события к родителям, но и останавливает выполнение других обработчиков событий на том же элементе. Рассмотрим пример:
При клике на элемент, в консоли мы увидим только лишь
В этом посте в качестве эксперимента сделал блок "коротко о главном", чтобы проще было усваивать материал и не приходилось читать очень длинные посты, если тема вам оказалась неинтересна. Накидайте 🔥 если этот блок — пушка-гонка, а я постараюсь добавлять его чаще
Спасибо за прочтение, это важно для меня ❤️
@prog_way_blog — чат — #theory #code #javascript
Итак, эти методы используются для управления событиями в JavaScript. Сначала разберём каждый из них по отдельности:
Этот метод предотвращает дальнейшее распространение события в фазе захвата или всплытия. Это значит, что событие сработает только на
event.target, то есть на самом элементе, но не на всех его родителях, как это сделано по умолчанию. Рассмотрим код:document.getElementById('child').addEventListener('click', event => {
event.stopPropagation();
console.log('Ребёнок');
});
document.getElementById('parent').addEventListener('click', () => {
console.log('Родитель');
});Так как мы используем
event.stopPropogation(), в консоли мы увидим только Ребёнок. Без использования этого метода, мы увидим вывод: Ребёнок, РодительЭтот метод не только предотвращает дальнейшее распространение события к родителям, но и останавливает выполнение других обработчиков событий на том же элементе. Рассмотрим пример:
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
Виды операторов в JavaScript
Операторы в языке (почти во всех языках, кстати), можно строго разделить на три категории:
1. Унарные операторы
Работают с одним операндом — то есть применяются только к одной переменной. Это, например, такие операторы, как
2. Бинарные операторы
Бинарные операторы работают с двумя операндами. Это самые распространенные операторы, включающие арифметические, логические, сравнительные и присваивающие операции
3. Тернарный оператор
Тернарный оператор — единственный оператор, который работает с тремя операндами и является сокращенной формой конструкции
Спасибо за прочтение, это важно для меня ❤️
@prog_way_blog — чат — #theory #code #javascript
Операторы в языке (почти во всех языках, кстати), можно строго разделить на три категории:
1. Унарные операторы
Работают с одним операндом — то есть применяются только к одной переменной. Это, например, такие операторы, как
i++ или --i, смены знака -i или отрицания !isTruelet a = 5;
a++; // теперь a равно 6
let b = -a; // теперь b равно -6
Операнд — это элемент данных, над которым выполняется операция. В выражении i++ переменная i будет операндом, а ++ — оператором
2. Бинарные операторы
Бинарные операторы работают с двумя операндами. Это самые распространенные операторы, включающие арифметические, логические, сравнительные и присваивающие операции
const x = 10;
const y = 20;
const sum = x + y; // (+) - арифметический оператор
const isEqual = x == y; // (==) - сравнительный оператор
3. Тернарный оператор
Тернарный оператор — единственный оператор, который работает с тремя операндами и является сокращенной формой конструкции
if-else. Он часто используется для кратких условийconst age = 31
const canKupitPivo = age >= 18 ? true : false
Краткий итог:
Операторы бывают трёх видов — унарные, бинарные и тернарные. Работают они с одним, двумя и тремя операндами соответственно
Спасибо за прочтение, это важно для меня ❤️
@prog_way_blog — чат — #theory #code #javascript
👍25❤9🔥5🐳1