初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
1章：jQuery入門
2章：jQuery基礎
3章：jQuery発展
番外編：研究

イベントフロー(1)

概要

イベントは要素を伝って移動する

入れ子構造を持つ構成の場合、イベントは発生した要素だけでなく、他の要素にも伝わっていきます。このことを理解していないと、思わぬ動作に戸惑うことになります。どのようにイベントが伝わるかというと、イベントが発生した要素から、親（先祖）方向に向かって伝わっていきます。

イベントの伝わり方（イベントフロー/バブリング）
イベントは、イベントが発生した要素から親（先祖）方向に向かって伝わっていきます。兄弟要素や子孫要素には伝わりません。このイベントが伝わる流れをイベントフローと呼びます。
※深い階層から浅い階層に伝わることを水中の泡に例えて「バブリング」と呼びます。

解説

イベントフローの確認

イベントフローが確認できるサンプルを用意しました。サンプル（flow1/01.html）のソースを開いてbody内を確認し、3つdiv要素が入れ子になっていることを確認してください。浅い階層からid属性は「blue」「red」「green」と設定されています。視覚的にも分かるようにcssでid属性の値に合わせて背景色を設定してあります。 

<div id="blue">
	<div id="red">
		<div id="green"></div>
	</div>
</div>

続いてjQueryを確認してください。div要素をクリックしたら、その要素のid属性の値をアラートで表示します。 

$("div").click(function () {
	alert(this.id);
});

まずは青いdiv要素（id属性はblue）をクリックしてください。アラートで「blue」と表示されます。これは予想通りの結果なのですが、次に緑色のdiv要素（id属性はgreen）をクリックしてください。するとアラートがgreen→red→blueの順で3回表示されます。これはイベントフローによってイベントが伝わったためです。

裏に隠れている要素にもイベントが伝わるのです

イベントフローについては左図のようなイメージで理解すると良いでしょう。サンプルflow1/01.htmlでは各div要素が左図のように「重なっている」のです、つまり緑のdiv要素の下に赤や青のdiv要素が隠れている構造になっています。ですから緑のdiv要素をクリックした時、裏にある赤や青のdiv要素もクリックされるのです。

構造的には緑のdiv要素は一番深い階層ですから、イベントは深い階層から浅い階層に伝わることが理解できると思います。それで「概要」で説明した内容になるわけです。
※jQueryでは利用されませんが、浅い階層から深い階層にイベントが伝わるのを「キャプチャリング」と呼びます。

ややこしく感じるイベントフローですが、クリックするメニューやボタンを入れ子にすることは少ないため実際には気にしなくても大丈夫です。入れ子構造のボタンを作成する時だけ気を付けてください。

メモ

「green」とだけアラートを出すには

もしサンプルflow1/01.htmlの様なケースで、緑のdiv要素だけアラートを出したい場合は、セレクタを工夫します。サンプル（flow1/test01.html）のソースを開いてbody内の構成がflow1/01.htmlと同じ事を確認してください。jQueryは以下の様にclickイベントのセレクタだけが変更され、id属性がgreenのdiv要素になっています。これで緑のdiv要素にしか反応しません。 

$("div#green").click(function () {
	alert(this.id);
});

裏に隠れた要素もクリック

何故、この様な仕様になっているかというと、裏に隠れた要素を操作できるようにするためです。
サンプル（flow1/test02.html）のソースを開いてbody内の構成がflow1/01.htmlと同じ事を確認してください。jQueryは以下の様にclickイベントのセレクタだけが変更され、id属性がblueのdiv要素になっています。 

$("div#blue").click(function () {
	alert(this.id);
});

これで青のdiv要素にしか反応しないはずですが、緑のdiv要素をクリックしてもアラートが表示されます。しかしアラートの内容を確認すると「blue」となっており、青のdiv要素がクリックに反応したことが確認できます。
このように裏に隠れた要素も操作できるのがjQuery（javaScript）の仕様なのです。

次回はイベントの情報を管理したりイベントフローを制御する「イベントオブジェクト」について説明します。