Событие: метод composedPath()

Базовая Широко поддерживается

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

Примечание: Эта функция доступна в Web Workers.

Метод composedPath() интерфейса Event возвращает путь события, который представляет собой массив объектов, по которым будут вызваны обработчики событий. Это не включает узлы в тенистых деревьях, если корень тени был создан с ShadowRoot.mode закрытым.

Синтаксис

const composed = Event.composedPath()

Параметры

Нет.

Возвращаемое значение

Массив объектов EventTarget, представляющих объекты, по которым будет вызван обработчик события.

Примеры

В следующем примере, который вы можете попробовать на https://mdn.github.io/web-components-examples/composed-composed-path/, мы определяем два тривиальных пользовательских элемента, <open-shadow> и <closed-shadow>, оба из которых принимают содержимое их атрибута text и вставляют его в теневой DOM элемента в качестве текстового содержимого элемента <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-composedpath①

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`composedPath`	5350–53	79	59	4037–40	10	5350–53	59	4137–41	10	6.05.0–6.0	5350–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/composedPath