バブリングってなに？(JavaScript)
今回はJavaScriptにおけるDOM操作の概念であるパブリングについて解説します。
パブリングとはWeb画面でイベントが起こった時に起こる処理パターンの一つです。
具体的に説明します。
例えば、div要素の中にbottun要素が入っているとします。二つの要素はそれぞれクリックした時にアラートするというonClickイベントを持っています。
ここで、試しにbutton要素をクリックしてみます。すると、アラートは二回実行されます。
感覚的には押したのはbutton要素なのでアラートは1回だと思いますよね。しかし、アラートは2回実行されるのです。
ここがパブリングの肝になります。
どうしてこのようなことが起こるのか、webブラウザの気持ちになって考えてみましょう。
まずブラウザからはhtml要素が見えており、その中にbody要素という一つの枠が見えています。さらにその枠の中にはdiv要素という枠が見えており、またまたその中にはbutton要素が見えています。ここで、button要素の枠を押した時、ブラウザにはユーザがbutton要素を押すつもりだったのか、div要素を押すつもりだったのか知る術はありません。
よって、どちらのイベントを発生させれば良いのかわからないのです。これを解決するためにパブリングの登場です。
上の例を使わせてもらうと、button要素がクリックされた時、ブラウザはbuttonの親要素のイベントを確認します。親要素であるdivはbuttonと同じようにクリックイベントを持っています。するとブラウザはさらにその親要素であるbody要素を調べます。
このようにしてブラウザはイベントが発生したときにその祖先をたどっていき、今まで確認したクリックイベントをまとめて実行します。今回確認したクリックイベントはbuttonとdivの二つなのでアラートは2回実行されるというわけです。
このように、水の中で発生した泡がだんだん上の方に上がっていき空気に触れた時に弾ける様が、イベントが親要素に上がっていき一番上でまとめて実行される様に似ているのでバブリングと呼ばれています。
JavaScriptでは、イベントが発生した時の一番最初の要素(上の例でいうbutton要素)をevent.target、イベントが実行される要素(上の例でいうdiv要素)をevent.curretTargetで取得できます。バブリングを止めるにはstopPropagationを使用します。
また、focusイベントなど一部のイベントではバブリングは発生しません。
