javascriptのイベントの伝播(キャプチャリング、バブリング)

対象者

• DOM操作が理解できている方

• アドイベントリスナーを使ったことがある方

キャプチャリングとは？

⇨親要素のイベントが発生すると子要素のイベントも発火する現象。

こんな感じ

これは各div要素とbodyにクリックするとクリックした要素が赤くなるようにjsで設定しています。div4をクリックするとbody⇨div1⇨div2⇨div3⇨div4と赤くなっていることが確認できますがなぜdiv4以外の色も赤になっているのでしょうか？

それは 実はjsのイベントリスナーを発火させるとき一番上の要素(window)のイベントから順番に発火しているためです。 なのでinput要素をクリックしてもinput要素に設定したイベントだけでなくその親要素のイベントも発火してしまします。

キャプチャリングの使い方

イベントリスナーの第３引数に{capture: true}を指定するとキャプチャリングが適用されます。

要素.addEventListener('click', butotnClick, {capture: true});

デフォルト(何も指定しないとキャプチャリングは発生しません)

要素.addEventListener('click', butotnClick}

バブリングとは？

⇨子要素のイベントが発生すると親要素さらにその上の要素のイベントも発火してしまう現象 div4をクリックした場合の挙動です。 注意div5はdiv４の親要素ではないのでこの場合バブリングは適用されません。