備忘録的プログラミングリファレンス

bubbles プロパティ

 bubbles プロパティは、エレメントがイベントをバブリングするかどうかを示す Event インターフェイスのプロパティです。bubbles プロパティの値はBool値です。

bubbles プロパティ
document.getElementById("example").addEventListener("click", (event) => {
	console.log( event.bubbles );
}, false);
詳しくはExampleを参照してください

 bubbles プロパティは読み取り専用です。

ページ内 Index

バブリングとキャプチャについて

 イベントのバブリングとは、あるエレメントで発生したイベントがその親エレメントでも発生するかを示します。

defaultView
( キャプチャー )(バブリング )
Document
( キャプチャー )(バブリング )
親のエレメント
( キャプチャー )(バブリング )
エレメント ( *イベントが発生 )

 イベントのバブリングは、イベントが親の階層に水中の泡のように上がっていくイメージからバブリングといいます。

 基本的には、イベントはドキュメントオブジェクトに到達するまで、親から親へとバブルするたびにイベントが発生します。
 バブリングされたイベントはイベントハンドラーが設定されたエレメントでトリガーされます。

 エレメントのバブリングはキャンセルすることもできます。キャンセルに関する方法には以下があります。

方法摘要/例
return false;onclick="func_();return false;"
event.preventDefault()<a>エレメントのURLをたどる機能など、デフォルトで発生するイベントをキャンセル。バブリングはする
event.stopPropagation()エレメントのイベントは発生するが親より上の階層のイベントはキャンセル
event.stopImmediatePropagation()エレメント内の他のイベントをキャンセル

Syntax

in JavaScript

返り値はBool型です。

Boolean = event.bubbles;

Values

trueイベントがバブリング
falseバブリングしない

Example

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。