JavaScriptのイベントバブリングを視る。

WebでJavaScriptを触っていると、イベントのバブリングという言葉に触れることがある。

ざっくり説明すると、子要素で発生したイベントが親要素、その上の親要素と親のほうに(先祖要素)に伝達していく様子が、深海で出来た泡が表層まで伝っていく様子に似通っているとかなんとかで、バブル(泡)言われてるらしいけど、本当かどうかは知らない。

で、お目にかかるタイミングですが、clickイベントなどを色々追加しているとそのうち出合うかと・・。

ある要素にclickイベントを割り付けて、その先祖要素のどこかにclickイベントがあると、ついでにそれも発火して動いてしまうという予期せぬ出来事が発生します。

なので、preventDefault() や stopPropagation()、return false; などを使ってイベントの伝達を制御したり、逆に、伝達を利用して、子要素にイベントを書かず、先祖要素にイベントを書くことで、どこのパーツをクリックしても全体がクリックされたことにするとかが、できたりできなかったり。

そこら辺の詳しいことはイベントバブリングで検索すれば情報があるので、そちらを参考に。

ここでは、どこに伝わるのかのデモを作ってみたので、下記リンクから試していただきたい。
ちなみにJavaScritpはHTMLファイルに直接書いてるので、ソースを見たければブラウザからすぐ見れると思います。

クリックするとバブリングするデモ

子と、兄弟要素には伝わらないけど、先祖要素にはclickが伝搬している。

では、先ほどのコードにstopPropagation()を追加。

クリックしてもバブリングしないデモ

これで、該当部分より先祖には伝わらない。
ただし、buttonは何もしていないので、その上の親のdivまでは伝搬する。

伝搬の速さが、泡ってレベルじゃないよね。

 

 

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>