バブリング・キャプチャリングについて
バブリングとは、イベントが発生した箇所からその親エレメントにイベントが伝わるというブラウザに備えられた機能です。
親に伝わったイベントはそこでもイベントとして発生します。最終的には window オブジェクトまで辿ります。
キャプチャリングとは、反対に親エレメントからイベントが発生した元のエレメントに伝わる機能です。
| 親のエレメント | |||
| ┃ | ↑ | ||
| ( キャプチャー ) | ┃ | ┃ | （バブリング ） |
| ↓ | ┃ | ||
| エレメント ( ＊イベントが発生 ) | |||
イベントは発生したエレメントからバブリングとして親に伝わり 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
バブリング・キャプチャリングについての例です。