バブリング・キャプチャリングについて
バブリングとはイベントが発生した箇所からその親エレメントにイベントが伝わるものです。親に伝わったイベントはそこでもイベントとして発生します。最終的には window まで辿ります。
キャプチャリングは反対にイベントが親エレメントからイベントが発生元のエレメントに伝わるものです。
| 親のエレメント | |||
| ┃ | ↑ | ||
| ( キャプチャー ) | ┃ | ┃ | （バブリング ） |
| ↓ | ┃ | ||
| エレメント ( ＊イベントが発生 ) | |||
バブリング・キャプチャリングはイベントの機能の基本となっています。
ページ内 Index
バブリングとキャプチャについて
イベントのバブリングとは、あるエレメントで発生したイベントがその親エレメントにも伝搬して発生する機能です。
| defaultView | |||
| ┃ | ↑ | ||
| ( キャプチャー ) | ┃ | ┃ | （バブリング ） |
| ↓ | ┃ | ||
| Document | |||
| ︰ | ↑ | ||
| ( キャプチャー ) | ┃ | ┃ | （バブリング ） |
| ┃ | ┃ | ||
| ↓ | ︰ | ||
| 親のエレメント | |||
| ┃ | ↑ | ||
| ( キャプチャー ) | ┃ | ┃ | （バブリング ） |
| ↓ | ┃ | ||
| エレメント ( ＊イベントが発生 ) | |||
イベントのバブリングは、イベントが親の階層に水中の泡のように上がっていくイメージからバブリングといいます。
基本的には、イベントはドキュメントオブジェクトに到達するまで、親から親へとバブルするたびにイベントが発生します。バブリングされたイベントは、もしもイベントハンドラーが設定されていたらそのハンドラーがトリガーされます。
例えば、エレメントでクリックが発生したらその親にもクリックイベントが発生します。もしも親でクリックを捉えるようにしてあるとそのための関数や数式が呼び出されます。
イベントハンドラーとは on から始まるイベント名や .addEventListener() 関数に設定された数式や関数のことです。詳しくはEvent ページのイベントハンドラーとイベント
を参照してください。
イベントがバブリングするか／否かは bubbles プロパティによって知ることができます。
エレメントのバブリングは、event.preventDefault()、event.stopPropagation()、event.stopImmediatePropagation() メソッドによってキャンセルすることができます。
イベントをキャンセルする他の方法として、return false;
を使用する方法もあります。
プロパティ（Property）
バブリング・キャプチャリングに関するプロパティには以下があります。
| Property | 概要 |
|---|---|
| .bubbles | エレメントがイベントをバブリングするかどうかを示す |
| .composed | Shadow DOM を超えて Document までイベントがバブリングするか／否か |
| .currentTarget | 現在対象となっているエレメント |
| .defaultPrevented | preventDefault()メソッドが呼び出されたか |
| .eventPhase | イベントの段階（フェーズ） |
| .target | イベントが発生したエレメント |
上記のプロパティは Event クラスのプロパティの一部です。より詳しいプロパティの内容は Event クラスのプロパティ
を参照してください。
メソッド（ Method ）
イベントをキャンセルする方法には以下があります。
| 方法 | 摘要/例 |
|---|---|
| event.preventDefault() | <a>エレメントのURLをたどる機能など、デフォルトで発生するイベントをキャンセル。バブリングはする |
| event.stopPropagation() | エレメントのイベントは発生するが親より上の階層のイベントはキャンセル |
| event.stopImmediatePropagation() | エレメント内の他のイベントをキャンセル |
event.preventDefault() は .defaultPrevented を true に設定します。
.defaultPrevented が true の場合でもイベントのバブリングはします。設定された以降のイベントハンドラーの実行は無効になります。
event.stopPropagation() は現行のイベントハンドラーの内容は実行されますが、親へのバブリングはキャンセルされます。
event.stopImmediatePropagation() は現行のイベントハンドラーの内容は実行されません。バブリングもキャンセルされます。
onclick="func_();return false;" といったイベントハンドラーの返り値に false を送るとイベントがキャンセルされるのは jQuery の機能のようです。
Example
バブリング・キャプチャリングについての例です。