Событие: свойство composed

Базовая Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

Примечание: Эта функция доступна в Потоках веб-работы.

Только для чтения composed свойство интерфейса Event возвращает логическое значение, которое указывает, будет ли событие распространяться через границу области тени DOM в стандартный DOM.

Все события UI, отправленные UA (клик/тач/mouseover/копирование/вставка и т.д.), являются составными (composed). Большинство других типов событий не являются составными и поэтому вернут false. Например, это включает в себя синтетические события, созданные без установленного параметра composed в значение true.

Распространение происходит только в том случае, если свойство bubbles также true. Однако обработка только составных событий также выполняется хостом, как если бы они находились в AT_TARGET фазе. Вы можете определить путь, по которому событие будет следовать через корень области тени к корню DOM, вызвав composedPath().

Значение

Логическое значение, которое равно true если событие переходит из области тени DOM в стандартный DOM после достижения корня области тени. (То есть, первый узел в области тени DOM, в котором началось распространение события.)

Если это значение false, корень области тени будет последним узлом, которому будет предложено событие.

Примеры

В этом примере мы определяем два тривиальных пользовательских элемента, <open-shadow> и <closed-shadow>, оба из которых берут содержимое их атрибута text и вставляют его в область тени элемента в качестве текстового содержимого элемента <p>. Единственное различие между ними заключается в том, что их корни областей тени прикреплены с режимами, установленные в open и closed соответственно.

Два определения выглядят так:

customElements.define(
  "open-shadow",
  class extends HTMLElement {
    constructor() {
      super();

      const pElem = document.createElement("p");
      pElem.textContent = this.getAttribute("text");

      const shadowRoot = this.attachShadow({
        mode: "open",
      });

      shadowRoot.appendChild(pElem);
    }
  },
);

customElements.define(
  "closed-shadow",
  class extends HTMLElement {
    constructor() {
      super();

      const pElem = document.createElement("p");
      pElem.textContent = this.getAttribute("text");

      const shadowRoot = this.attachShadow({
        mode: "closed",
      });

      shadowRoot.appendChild(pElem);
    }
  },
);

Затем мы вставляем один из каждого элемента в нашу страницу:

<open-shadow text="I have an open shadow root"></open-shadow>
<closed-shadow text="I have a closed shadow root"></closed-shadow>

Затем включите обработчик событий клика для элемента <html>:

document.querySelector("html").addEventListener("click", (e) => {
  console.log(e.composed);
  console.log(e.composedPath());
});

Когда вы нажимаете на элемент <open-shadow> , а затем на элемент <closed-shadow> , вы заметите две вещи.

Свойство composed возвращает true потому что событие click всегда может распространяться через границы областей тени.
Разница в значении composedPath для двух элементов.

Путь события с составлением для элемента <open-shadow> выглядит так:

Array [ p, ShadowRoot, open-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]

В то время как путь события с составлением для элемента <closed-shadow> выглядит следующим образом:

Array [ closed-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]

Во втором случае обработчики событий распространяются только до элемента <closed-shadow> , но не до узлов внутри границы области тени.

Спецификации

Спецификация
DOM # ref-for-dom-event-composed①

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`composed`	53	79	52 До Firefox 95, это свойство неправильно устанавливалось в `false` для элементов `<select>` и `<input type='checkbox'>`.	40	10	53	52 До Firefox для Android 95, это свойство неправильно устанавливалось в `false` для элементов `<select>` и `<input type='checkbox'>`.	41	10	6.0	53

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Event/composed