Есть желание присоединиться к интересным IT проектам? Смотри открытые вакансии.

JavaScript свойство Event.composed

JavaScript Event

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

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

Логическое значение true соответствует тому, что событие перейдет из теневого DOM (shadow DOM) в стандартный DOM после достижения теневого корня (shadow root), то есть первого узла в теневом DOM, в котором событие начало распространяться. Все отправленные события пользовательского интерфейса являются composed и возвращают логическое значение true, большинство других типов событий не являются composed и поэтому возвращают false, например, искусственные события, которые были созданы и отправлено сценарием на языке JavaScript (созданы без установки для параметра composed значения true).

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
composed53.052.040.0???

JavaScript синтаксис:

event.composed

Версия JavaScript

Document Object Model (DOM) Level 3 Events

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript свойства composed и метода composedPath() объекта Event</title>
	</head>
	<body>
		<my-open-shadow></my-open-shadow>
		<my-close-shadow></my-close-shadow>
		<script>
	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()); // выводим в консоль путь события, представляющий собой массив объектов, на которых будут вызваны обработчики событий
	});
		</script>
	</body>
</html>

Интерфейс customElement позволяет описывать собственные 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.

Результат нашего примера:

Пример использования JavaScript свойства composed и метода composedPath() объекта Event
Пример использования JavaScript свойства composed и метода composedPath() объекта Event
JavaScript Event
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.