bubbles プロパティ
event.bubbles
bubbles プロパティは、エレメントがイベントをバブリングするかどうかを示す Event インターフェイスのプロパティです。bubbles プロパティの値はBool値です。
document.getElementById("example").addEventListener("click", (event) => {
console.log( event.bubbles );
}, false);
詳しくは Example を参照してください
bubbles プロパティは読み取り専用です。
ページ内 Index
- ad -
バブリングとキャプチャについて
イベントのバブリングとは、あるエレメントで発生したイベントがその親エレメントでも発生するかを示します。
| 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
bubbles プロパティの例です。
- ad -