せつないぶろぐ

jQueryでバブリングのテスト

またまたjQueryネタ。
仕事でイベントのバブリングを利用することになりそうだったので調べてみました。

DOMの下層エレメントがイベントを発生すると上位のエレメントまで伝播される。
このことをイベントバブリング（またはバブリング）と言います。

例えば下記の様な構造にそれぞれclickイベントが割り当てられていた場合koのクリックに対してko→oyaの順でイベントが発生します。

<div id="oya">
  <div id="ko"></div>
</div>

バブリングを利用する時はそのまま素直に利用すればいいのですが、上位エレメントにイベントを伝えたくない時もあります。
その時はイベントに対してstopPropagationメソッドを発行します。

サンプル作ってみたので試してみたい方はこちら

ソースは以下になっています。

■html

<p>バブリング</p>
<div id="b3" class="box size3">
	<div id="b2" class="box size2">
		<div id="b1" class="box size1">
		</div>
	</div>
</div>
<p>バブリング 停止</p>
<div id="s3" class="box size3">
	<div id="s2" class="box size2">
		<div id="s1" class="box size1">

		</div>
	</div>
</div>

■JavaScript

$(document).ready(function () {
	$(".box").click(function (e) {
		alert(this.id);
	});
	$("#s2").click(function (e) {
		alert("バブリングを停止します");
		e.stopPropagation();
	});
});

もっと詳しく見たい方はサンプルページでソースを直接ご覧下さい。
使い易いのでjQueryを利用していますが、バブリングの考え方はJavaScirptで共通なのでjQueryじゃないと利用できないって事はありません。