BLOG
キャプチャリング、バブリング
2015/3/7
DOMのイベントには、キャプチャリングフェーズとバブリングフェーズという二つのフェーズがあります。
キャプチャリングフェーズとはDOMの外側（親要素）からイベントが発生した要素に向かってイベントが伝わっていきます。
バブリングフェーズとはイベントが発生した要素から外側に向かってイベントが伝わっていきます。
|
1 2 3 4 |
<div id="sample1"> <div id="sample2"> </div> </div> |
上記のような要素があったときにid=”sample2″でイベントが発生すると、
bodyなど親要素のキャプチャリングフェーズイベント
id=”sample1″のキャプチャリングフェーズイベント
id=”sample2″のキャプチャリングフェーズイベント
id=”sample2″のバブリングフェーズイベント
id=”sample1″のバブリングフェーズイベント
bodyなど親要素のバブリングフェーズイベント
という順番で実行されます。
addEventListenerの第三引数でどちらのイベントにするかを指定出来ます。
trueにするとキャプチャリングフェーズ、falseをしているするとバブリングフェーズで実行されます。デフォルトはfalseです。
addEventListener対応していないブラウザや、jQueryのイベント動作はバブリングフェーズのみしか指定できないようです。
Tag:JavaScript