Shadow DOM и события

Добро пожаловать в руководство по освоению обработки событий в Shadow DOM. В этом руководстве рассматриваются ключевые концепции, такие как всплытие событий, event.composedPath(), event.composed и пользовательские события. К концу вы поймете, как эффективно управлять событиями в компонентах Shadow DOM.

Всплытие событий в Shadow DOM

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

В контексте Shadow DOM всплытие событий ведет себя немного иначе. По умолчанию большинство нативных событий (например, click или mouseover) являются составными и распространяются через границу тени. Однако некоторые события (например, focus или scroll) не являются составными и остаются внутри Shadow DOM. Пользовательские события требуют явной конфигурации для пересечения границы. Чтобы полностью остановить распространение в любой момент, можно использовать event.stopPropagation().

Использование event.composedPath()

Метод event.composedPath() предоставляет способ получить последовательность элементов DOM, которые проходит событие во время своего распространения, включая элементы внутри Shadow DOM. Этот метод возвращает массив узлов DOM, представляющих путь события, что позволяет разработчикам анализировать и управлять потоком распространения.

Давайте проиллюстрируем, как event.composedPath() можно использовать для отслеживания распространения событий внутри Shadow DOM:

---

<div id="outer"></div>
<script>
  const outer = document.getElementById('outer');
  const shadow = outer.attachShadow({ mode: 'open' });
  const inner = document.createElement('div');
  inner.textContent = 'Click me';

  inner.addEventListener('click', event => {
    const composedInfo = document.createElement('p');
    composedInfo.textContent = 'The event composedPath contains the following elements:';
    shadow.appendChild(composedInfo);
    const path = event.composedPath();
    path.forEach((e) => {
      const pathItem = document.createElement('p');
      pathItem.textContent = e.tagName;
      shadow.appendChild(pathItem);
    });
  });

  shadow.appendChild(inner);
</script>

Try it Yourself »

В этом примере клик по внутреннему <div> вызывает обработчик события click, прикрепленный к нему. Мы динамически создаем несколько элементов <p> для отображения результата event.composedPath() внутри Shadow DOM.

Понимание event.composed

Свойство event.composed указывает, является ли событие составным или нет. Составные события способны пересекать границы тени, тогда как несоставные события ограничены внутри границы тени. Обратите внимание, что event.composed — это свойство только для чтения. Это особенно полезно при работе с пользовательскими событиями, которым требуется composed: true в их параметрах для пересечения границ тени, в отличие от нативных событий, таких как click, которые по умолчанию являются составными.

Давайте рассмотрим, как event.composed можно использовать на практике:

---

<div id="outer"></div>

<script>
  const outer = document.getElementById('outer');
  const shadow = outer.attachShadow({ mode: 'open' });
  const button = document.createElement('button');
  button.textContent = 'Click me';

  button.addEventListener('click', event => {
    const composedInfo = document.createElement('p');
    composedInfo.textContent = `Composed: ${event.composed}`;
    shadow.appendChild(composedInfo);
  });

  shadow.appendChild(button);
</script>

Try it Yourself »

В этом примере клик по кнопке внутри Shadow DOM вызывает событие click. Мы динамически создаем элемент <p> для отображения свойства event.composed внутри Shadow DOM.

Пользовательские события в Shadow DOM

Пользовательские события позволяют разработчикам определять и отправлять собственные типы событий, предоставляя гибкий механизм для взаимодействия между компонентами. При работе с Shadow DOM пользовательские события могут использоваться для облегчения связи между элементами тени и светового DOM, обеспечивая бесшовное взаимодействие внутри веб-приложения.

Давайте создадим и отправим пользовательское событие внутри Shadow DOM:

---

<div id="container"></div>

<script>
  const container = document.getElementById('container');
  const shadow = container.attachShadow({ mode: 'open' });
  const button = document.createElement('button');
  button.textContent = 'Click me';

  button.addEventListener('click', () => {
    const event = new CustomEvent('customEvent', { bubbles: true, composed: true });
    button.dispatchEvent(event);
  });

  shadow.appendChild(button);

  container.addEventListener('customEvent', () => {
    const composedInfo = document.createElement('p');
    composedInfo.textContent = `Custom Event Triggered!`;
    container.appendChild(composedInfo);
  });
</script>

Try it Yourself »

В этом примере клик по кнопке внутри Shadow DOM отправляет пользовательское событие с именем customEvent с параметрами bubbles: true и composed: true, что позволяет ему распространяться через границы тени. Обработчик события прикреплен к элементу-хосту (container) в световом DOM, демонстрируя, как событие пересекает границу тени и вызывает обработчик.

Заключение

Освоение обработки событий в Shadow DOM имеет решающее значение для создания надежных веб-приложений. Понимая всплытие событий, event.composedPath(), event.composed и пользовательские события, вы сможете эффективно управлять распространением событий и обеспечивать бесшовную связь между компонентами. Продолжайте экспериментировать с этими примерами, чтобы стать мастером событийно-ориентированного программирования в Shadow DOM.

Практика

Какой метод предоставляет способ получить последовательность элементов DOM, которые проходит событие во время своего распространения?

event.composedPath()event.path()event.target()event.nodes()