bubbles プロパティ
event.bubbles
bubbles プロパティは、エレメントがイベントをバブリングするかどうかを示す Event インターフェイスのプロパティです。bubbles プロパティの値はBool値です。
document.getElementById("example").addEventListener("click", (event) => {
console.log( event.bubbles );
}, false);
詳しくは Example を参照してください
bubbles プロパティは読み取り専用です。
ページ内 Index
バブリングとキャプチャについて
イベントのバブリングとは、あるエレメントで発生したイベントがその親エレメントでも発生するかを示します。
| defaultView | |||
| ┃ | ↑ | ||
| ( キャプチャー ) | ┃ | ┃ | （バブリング ） |
| ↓ | ┃ | ||
| Document | |||
| ︰ | ↑ | ||
| ( キャプチャー ) | ┃ | ┃ | （バブリング ） |
| ┃ | ┃ | ||
| ↓ | ︰ | ||
| 親のエレメント | |||
| ┃ | ↑ | ||
| ( キャプチャー ) | ┃ | ┃ | （バブリング ） |
| ↓ | ┃ | ||
| エレメント ( ＊イベントが発生 ) | |||
イベントのバブリングは、イベントが親の階層に水中の泡のように上がっていくイメージからバブリングといいます。
基本的には、イベントはドキュメントオブジェクトに到達するまで、親から親へとバブルするたびにイベントが発生します。
バブリングされたイベントはイベントハンドラーが設定されたエレメントでトリガーされます。
エレメントのバブリングはキャンセルすることもできます。キャンセルに関する方法には以下があります。
| 方法 | 摘要/例 |
|---|---|
| event.preventDefault() | <a>エレメントのURLをたどる機能など、デフォルトで発生するイベントをキャンセル。バブリングはする |
| event.stopPropagation() | エレメントのイベントは発生するが親より上の階層のイベントはキャンセル |
| event.stopImmediatePropagation() | エレメント内の他のイベントをキャンセル |
event.preventDefault() は .defaultPrevented を true に設定します。
.defaultPrevented が true の場合でもイベントのバブリングはします。設定された以降のイベントハンドラーの実行は無効になります。
event.stopPropagation() は現行のイベントハンドラーの内容は実行されますが、親へのバブリングはキャンセルされます。
event.stopImmediatePropagation() は現行のイベントハンドラーの内容は実行されません。バブリングもキャンセルされます。
onclick="func_();return false;" といったイベントハンドラーの返り値に false を送るとイベントがキャンセルされるのは jQuery の機能のようです。
Syntax
in JavaScript
返り値はBool型です。
Boolean = event.bubbles;
Values
| true | イベントがバブリング |
| false | バブリングしない |
Example
bubbles プロパティの例です。