Event.composed - DOMとShadow DOM間で伝播するか?
composedは、Eventのプロパティです。通常のDOMとShadow DOMの間でイベントが伝播するか否かを返します。
概要
- 名前
- composed
- 所属
- Event
- IDL
readonly attribute boolean composed;
- 仕様書
- https://dom.spec.whatwg.org/#dom-event-composed
説明
通常のDOMとShadow DOMの間でイベントが伝播する場合はtrue、違うならfalseを返す。
読み取り専用のプロパティのため、値を代入することはできません。
デモ
Event.composedのデモです。Shadow DOM内のボタンにclickイベントを設定しました。clickイベントはtrueを返すので、Shadow DOMを通して通常のDOMにまでイベントが伝播しているのが確認できます。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div#result {
white-space: pre-wrap ;
}
</style>
</head>
<body>
<div id="hoge">
<button slot="name">実行</button>
</div>
<template id="fuga">
<p><slot name="name"></slot></p>
</template>
<hr>
<div id="result"></div>
<script>
var element1 = document.getElementById( "hoge" ) ;
var element2 = document.getElementById( "fuga" ) ;
var hostElement = element1 ;
var templeteContent = element2.content.cloneNode(true) ;
var shadowRoot = hostElement.attachShadow( { mode: "open" } ) ;
shadowRoot.appendChild( templeteContent ) ;
shadowRoot.firstElementChild.onclick = function ( event ) {
var value = event.composed ;
console.log( value ) ;
resultElement.innerHTML = "" ;
resultElement.appendChild( new Text( value + "\n\n" ) ) ;
resultElement.appendChild( new Text( "伝播の流れ:\n" ) ) ;
resultElement.appendChild( new Text( event.composedPath() ) ) ;
}
var resultElement = document.getElementById( "result" ) ;
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● 53+ | ● 52+ | ● 10+ | × | × | ● 40+ | ● 10.0+ | × |
関連記事
- Event.target
- targetは、Eventのプロパティです。イベントの発信源となったオブジェクトを返します。伝播で発生しているイベント内において、元のオブジェクトを確認するのに有用です。
- blurイベント
- blurイベントは、フォーカスを外した時に発生するイベントです。
- Event.cancelBubble
- cancelBubbleは、Eventのプロパティです。trueを代入すると、現在のイベントで伝播を終了させます。このプロパティは利用できなくなる予定です。代わりにstopPropagation()を利用して下さい。
- Event.isTrusted
- isTrustedは、Eventのプロパティです。イベントがユーザーの操作により発生したか否かを返します。例えばclickイベントが、ユーザーがクリック操作をして発生した場合はtrue、EventTarget.dispatchEvent()など、スクリプトで発生させた場合はfalseを返します。