Event.bubbles - バブリングフェイズで伝播するか?
bubblesは、Eventのプロパティです。このイベントが、バブリングフェイズで伝播するか否かを返します。イベントはキャプチャリングフェイズ、ターゲットフェイズ、バブリングフェイズの順に伝播しますが、この中のバブリングフェイズがある場合にtrueを返します。
概要
- 名前
- bubbles
- 所属
- Event
- IDL
readonly attribute boolean bubbles;
- 仕様書
- https://dom.spec.whatwg.org/#dom-event-bubbles
説明
バブリングフェイズで伝播する場合はtrue、違うならfalseを返す。
イベントフェイズに関しては、EventTargetのチュートリアルで説明しています。
デモ
Event.bubblesのデモです。button要素にclickイベントを設定しました。イベントは伝播するので、trueを返します。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div#result {
white-space: pre-wrap ;
}
</style>
</head>
<body>
<button id="run">実行</button>
<hr>
<div id="result"></div>
<script>
/** try it! **/
var callbackFn = function ( event ) {
console.log( event.bubbles ) ;
resultElement.innerHTML = "" ;
resultElement.appendChild( new Text( "currentTarget: " + event.currentTarget + "(#" + event.currentTarget.id + ")" + "\n" ) ) ;
resultElement.appendChild( new Text( "bubbles: " + event.bubbles ) ) ;
} ;
document.getElementById( "run" ).addEventListener( "click", callbackFn ) ; // button要素
/** try it! **/
var resultElement = document.getElementById( "result" ) ;
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● 19+ | ● | ● 6.0+ | ● | ● 9+ | ● | ● 6.0+ | ● 4.3+ |
関連記事
- Event
- Eventは、イベントの内容を確認したり、変更するための機能を備えたインターフェイスです。
- Event.isTrusted
- isTrustedは、Eventのプロパティです。イベントがユーザーの操作により発生したか否かを返します。例えばclickイベントが、ユーザーがクリック操作をして発生した場合はtrue、EventTarget.dispatchEvent()など、スクリプトで発生させた場合はfalseを返します。
- Event.composedPath()
- composedPath()は、Eventのプロパティです。イベントが伝播するノードを順番に含んだ配列を返します。イベントフェイズにおいて、ターゲットフェイズにあたるノードが配列の先頭で、そこからバブリングフェイズで伝播する順番に、最後がWindowになるように格納されていきます。イベントが設定されているか否かは関係ありません。
- Event.cancelBubble
- cancelBubbleは、Eventのプロパティです。trueを代入すると、現在のイベントで伝播を終了させます。このプロパティは利用できなくなる予定です。代わりにstopPropagation()を利用して下さい。