JavaScriptのイベントのバブリングという現象

Javascript

なんか、存在すらしないかのようにあまり語られることのないバブリングなんで、ちょっとバブります

バブリングってなんなの？

イベント発生源からドキュメントの親ノード親ノードへとイベントが伝わることらしいですわ
つまりイベントハンドラが登録してあれば、子要素をクリックした場合、親をクリックしてもないのに親のイベントハンドラにセットしてある関数が呼び出されたりします

ってかわかりにくいのでサンプルを

<!-- 親子ブロック -->
<div id="hoge1" onclick="this.style.backgroundColor='#0000FF';">
    <div id="hoge11" onclick="this.style.backgroundColor='#FF00FF';">
    </div>
</div>

<!-- 兄弟ブロック -->
<div id="hoge2" onclick="this.style.backgroundColor='#0000FF';">
</div>
<div id="hoge22" onclick="this.style.backgroundColor='#FF00FF';">
</div>

全部の要素にonclickイベントハンドラをくっつけてある

親子の水色・・・つまり子要素をクリックするとそれが「バブリング」して親要素に伝わる、親要素のイベントハンドラがそのイベントをキャッチして色を変える

兄弟の水色をクリックするとバブリングで親要素にクリックイベントは伝わるが、兄弟には伝わらないので色に変化無し

↓動くサンプル
http://yakinikunotare.boo.jp/orebase/index.php?Javascript%2F%A5%A4%A5%D9%A5%F3%A5%C8%A4%CE%A5%D0%A5%D6%A5%EA%A5%F3%A5%B0%A4%C8%A4%A4%A4%A6%B8%BD%BE%DD


ま・・・簡単だけどそういうこっちゃ
こんなこともあるんですね、特に意識してなかったけど、へんなことでバグの元になりそうなので紹介
イベントハンドラの設定の仕方によって、バブリングしてくるイベントをキャッチするかどうかの設定もできるんで、そこらはIT戦記とかに書いてあるんじゃないですかね