«Освоение всплытия событий: упрощение кода JavaScript»

Как веб-разработчик, вы, вероятно, знакомы с концепцией обработки событий в JavaScript. Когда пользователь взаимодействует с веб-страницей, запускаются такие события, как щелчки, нажатия клавиш и движения мыши. В JavaScript вы можете написать код, реагирующий на эти события и соответствующим образом обновляющий состояние веб-страницы.

Однако события в JavaScript не всегда ведут себя прямолинейно. Когда событие запускается, оно не просто влияет на элемент, который его запустил. Вместо этого оно также может влиять на свои родительские и предковые элементы, в зависимости от того, как событие распространяется через DOM. Этот процесс известен как всплытие событий, и в этой интерактивной записи блога мы рассмотрим концепцию всплытия событий в JavaScript и то, как это работает.

Что такое пузырьковое событие?

В JavaScript всплывающее окно событий — это процесс, посредством которого событие распространяется от самого внутреннего дочернего элемента к его родительскому и предковому элементам. Это означает, что если пользователь щелкает элемент, событие сначала будет инициировано для этого элемента, а затем будет распространено по дереву DOM на его родительские и предковые элементы.

Например, рассмотрим следующий код HTML:

<div id="outer">
  <div id="inner">
    <button id="button">Click Me</button>
  </div>
</div>

Если пользователь щелкает элемент кнопки, событие щелчка сначала будет инициировано на кнопке, а затем распространяется на внутренний элемент div и, наконец, на внешний элемент div. Этот процесс известен как всплытие событий, поскольку событие «всплывает» от самого внутреннего элемента к самому внешнему элементу.

Всплывание событий и захват событий:

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

Как правило, события в JavaScript следуют трехэтапной модели распространения: захват, нацеливание и всплытие. На этапе захвата событие распространяется вниз по дереву DOM от самого внешнего элемента к самому внутреннему элементу. Во время целевой фазы событие запускается на целевом элементе. Наконец, во время фазы всплытия событие распространяется вверх по дереву DOM от самого внутреннего элемента к самому внешнему элементу.

Событие.stopPropagation():

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

Чтобы предотвратить распространение события, вы можете использовать метод event.stopPropagation(). Этот метод останавливает распространение события вверх по дереву DOM и гарантирует, что оно сработает только для целевого элемента.

Например, рассмотрим следующий код HTML:

<div id="outer">
  <div id="inner">
    <button id="button">Click Me</button>
  </div>
</div>

Если вы хотите, чтобы событие click не запускалось во внешнем элементе div, когда пользователь нажимает кнопку, вы можете использовать следующий код JavaScript:

const button = document.getElementById('button');
button.addEventListener('click', (event) => {
  event.stopPropagation();
  console.log('Button clicked');
});

Этот код прикрепляет прослушиватель событий щелчка к элементу кнопки, а затем вызывает метод event.stopPropagation(), чтобы предотвратить распространение события вверх по дереву DOM.

Пример 1. Нажмите "Событие" на родительском элементе

<div id="parent">
  <button id="child">Click Me</button>
</div>
const parent =document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', (event) => {
console.log('Parent clicked');
});

child.addEventListener('click', (event) => {
console.log('Child clicked');
});

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

Пример 2. Нажмите "Событие" на вложенных элементах

<div id="outer">
  <div id="inner">
    <button id="button">Click Me</button>
  </div>
</div>
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const button = document.getElementById('button');

outer.addEventListener('click', (event) => {
  console.log('Outer clicked');
});

inner.addEventListener('click', (event) => {
  console.log('Inner clicked');
});

button.addEventListener('click', (event) => {
  console.log('Button clicked');
});

В этом примере у нас есть вложенная структура HTML с тремя элементами: внешний элемент div, внутренний элемент div и элемент кнопки. Мы прикрепляем прослушиватели событий click ко всем трем элементам. Если мы нажмем кнопку, будут запущены все три события щелчка в следующем порядке: нажатие кнопки, внутренний щелчок и внешний щелчок.

Пример 3. Остановка распространения на вложенных элементах

<div id="outer">
  <div id="inner">
    <button id="button">Click Me</button>
  </div>
</div>
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const button = document.getElementById('button');

outer.addEventListener('click', (event) => {
  console.log('Outer clicked');
});

inner.addEventListener('click', (event) => {
  console.log('Inner clicked');
  event.stopPropagation();
});

button.addEventListener('click', (event) => {
  console.log('Button clicked');
});

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

Вывод: Всплывающие события — это мощная концепция в JavaScript, которая позволяет событиям распространяться от дочерних элементов к родительским элементам. Поняв, как работает всплывающее окно событий, вы сможете написать более эффективный код обработки событий и предотвратить непредвиденное поведение своих веб-приложений. Поэкспериментировав с примерами, представленными в этом интерактивном сообщении в блоге, вы сможете глубже понять всплывающую подсказку событий и ее влияние на ваши проекты веб-разработки.

Спасибо за чтение моего блога

Лавджот Сайни