JavaScript метод Event.composedPath()

Определение и применение

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

Путь доступен во время обработки события; после завершения отправки возвращается пустой массив. Видимость узлов закрытого теневого дерева зависит от положения текущего обработчика: внешнему обработчику внутренние узлы не раскрываются.

Поддержка браузерами

Спецификация: dom.spec.whatwg

✓Поддерживается во всех основных браузерах с 2020 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.Event.composedPath

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
composedPath	✓53… Версия 53 выпущена в 2016 г. Версия 50 выпущена в 2016 г. — Удалено в 53; Имя deepPath	✓79	✓59	✓40… Версия 40 выпущена в 2016 г. Версия 37 выпущена в 2016 г. — Удалено в 40; Имя deepPath	✓10	✓53… Версия 53 выпущена в 2016 г. Версия 50 выпущена в 2016 г. — Удалено в 53; Имя deepPath	✓59	✓41… Версия 41 выпущена в 2016 г. Версия 37 выпущена в 2016 г. — Удалено в 41; Имя deepPath	✓10	✓6.0… Версия 6.0 выпущена в 2017 г. Версия 5.0 выпущена в 2016 г. — Удалено в 6.0; Имя deepPath	✓53… Версия 53 выпущена в 2016 г. Версия 50 выпущена в 2016 г. — Удалено в 53; Имя deepPath	✓10

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

const path = event.composedPath();

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

DOM Standard.

Пример использования

<my-open-shadow></my-open-shadow>
<my-close-shadow></my-close-shadow>

customElements.define(
    'my-open-shadow', // создаем собственный HTML элемент my-open-shadow
    class extends HTMLElement {
        // создаем дочерний класс, который расширяет класс HTMLElement
        constructor() {
            super() // вызываем родительский конструктор

            let p = document.createElement('p') // создаем элемент p
            p.textContent = 'My custom element' // добавляем элементу p текстовое содержимое

            let shadowRoot = this.attachShadow({ mode: 'open' }) // прикрепляем теневое дерево DOM к элементу my-open-shadow (используем режим open)
                .appendChild(p) // добавляем созданный элемент в теневое дерево DOM
        }
    },
)

customElements.define(
    'my-close-shadow', // создаем собственный HTML элемент my-close-shadow
    class extends HTMLElement {
        // создаем дочерний класс, который расширяет класс HTMLElement
        constructor() {
            super() // вызываем родительский конструктор

            let p = document.createElement('p') // создаем элемент p
            p.textContent = 'My custom element 2' // добавляем элементу p текстовое содержимое

            let shadowRoot = this.attachShadow({ mode: 'closed' }) // прикрепляем теневое дерево DOM к элементу my-close -shadow (используем режим closed)
                .appendChild(p) // добавляем созданный элемент в теневое дерево DOM
        }
    },
)

document.addEventListener('click', function (event) {
    // регистрируем обработчик события "click" для документа
    console.log('Событие ' + event.type + ' composed = ' + event.composed) // выводим в консоль тип события и значение свойства composed
    console.log(event.composedPath()) // выводим в консоль путь события, представляющий собой массив объектов, на которых будут вызваны обработчики событий
})

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

Свойство customElements (объект CustomElementRegistry) позволяет описывать собственные HTML теги и задавать то, как элементы, создаваемые с помощью этих тегов, будут выглядеть на экране. С помощью метода интерфейса define() мы определим два новых элемента my-open-shadow и my-close-shadow, которые используют созданный с помощью метода createElement() элемент <p> в качестве содержимого для своего теневого DOM. Для этого мы использовали методы attachShadow() для прикрепления теневого DOM к элементу, и метод appendChild() для вставки созданного элемента <p> к теневому корню.

Обратите внимание на то, что при прикреплении теневого дерева DOM к элементу my-open-shadow мы используем режим "open", а для элемента my-close-shadow мы используем режим "closed". Метод composedPath() для обработчика вне закрытого теневого дерева не включает внутренние узлы в теневых DOM (shadow DOM), если теневой корень (shadow root) был создан с режимом "closed".

Кроме того, с помощью метода addEventListener() зарегистрировали обработчики события "click" (нажатие левой кнопкой мыши на элементе) для документа. При срабатывании этого события мы с использованием свойства composed выводим в консоль логическое значение, которое указывает, будет ли событие распространяться через границу теневого DOM в основное дерево DOM, а с использованием метода composedPath() выводим в консоль путь события, представляющий собой массив объектов, на которых будут вызваны обработчики событий.

Сравните выводы в консоли: в первом случае мы производим клик непосредственно по первому элементу <p> (теневой корень (shadow root) был создан с режимом "open"), во втором по второму элементу <p> (теневой корень (shadow root) был создан с режимом "closed"), и в третьем уже по документу, кроме того для вывода типа события в консоль мы используем свойство type объекта Event.