jQuery入門講座使い方-イベントフロー(2)

イベントフロー(2)

イベントオブジェクト

イベントが伝播するのを途中で止めるにはイベントオブジェクトを利用します。サンプル（02/12_01.html）のソースを確認して下さい。実行する処理に設定したfunctionの引数部分に変数が設定してあります（変数名は任意ですが、ここではevent objectの頭文字を取ってeoとしました）。ここにイベントオブジェクトが渡されるのです。イベントオブジェクトはイベントに関する様々な情報を持っています。

$(document).on("click", "div", function (eo) {
	alert(this.id);
})

まずはイベントオブジェクトの情報をどの様に利用するか説明します。サンプル（02/12_02.html）を開き、以下のjQueryを確認して下さい。着目するのは2行目のalert内です。eoは前述のイベントオブジェクトです。オブジェクトなので情報はプロパティとして持っているので、以下の様に.（ドット）に続けてプロパティ名を書きます。

$(document).on("click", "div", function (eo) {
	alert(eo.target);
})

ここで利用しているtargetプロパティはイベントが発生した要素（緑をクリックしたらidがgreenのdiv要素）の情報を持っています。サンプルで緑のdiv領域をクリックすると「object HTMLDivElement」と表示されるのを確認して下さい（イベントがred/blueにも伝わるのは変わりないので３回アラートがでます）。

しかし、これではどのdiv要素なのか分からないので、サンプル（02/12_03.html）を用意しました。以下のようにidを追加してid名を表示させています。

$(document).on("click", "div", function (eo) {
	alert(eo.target.id);
})

この結果からtargetプロパティはイベントが発生した要素（idがgreenのdiv）であることが確認できます。

もう少し実用的なサンプルを作成しました。サンプル（02/12_04.html）を開いて下さい。このサンプルでは以下の様に、targetプロパティで得た情報をセレクタに利用し、cssメソッドでcssを変更するようしました。

$(document).on("click", "div", function (eo) {
	$(eo.target).css("background-color","#666");
})

targetはidがgreenのdivしか指していないので、灰色になるのはgreenのdivだけですが、アラートが3かいでるのと同じように3回処理されています。このサンプルのように問題にならない場合もありますが無駄なことは避けるべきです。ということで、次項のstopPropagationメソッドにつながります。
※他のプロパティについてはリファレンスのイベントオブジェクトのプロパティを確認してください。

stopPropagationメソッド

イベントオブジェクトにはプロパティだけでなくメソッドも備えており、その中にはイベントの伝播を止めるくstopPropagationメソッドがあります。これを利用すれば入れ子構造になっている場合でもクリックしたdiv領域からだけアラートを表示できるようになります。サンプル（02/12_05.html）を確認して下さい。これはサンプル02/12_01.htmlにstopPropagationメソッドの１行を追加しただけです。以下の様にイベントオブジェクトに対して（.カンマを挟んで）直接メソッドを設定します。

$(document).on("click", "div", function (eo) {
	alert(this.id);
	eo.stopPropagation();
})

このサンプルではイベントが伝播しないので、クリックしたdiv要素のidだけが表示されるようになりました。もし入れ子構造でクリックされた対象だけを操作したい場合はここで学んだことを思い出してください。

preventDefaultメソッド

ついでにもう１つイベントオブジェクトのメソッドを紹介します。jQueryでは発生したイベントをブラウザに渡さないようにすることも可能なのです。具体的にはaタグをクリックしてもリンクしないようにする等です。必要なさそうな機能に見えますが、サンプルページのスムースなスクロール（サンプル未完成のためリンク無し）などで利用します。

サンプル（02/12_06.html）のソースを確認してdivがaタグで囲まれているのを確認してください。jQueryはサンプル02/12_01.htmlと同じくアラートを表示するだけです。緑のdiv領域をクリックすると３回目のアラートにokを押した後でyahooのサイトにリンクします。

続いてサンプル（02/12_07.html）のjQuery部分を確認して下さい。以下の様にイベントオブジェクトに対しpreventDefaultメソッドが利用されています。

$(document).on("click", "div", function (eo) {
	alert(this.id);
	eo.preventDefault();
})

このサンプルで緑のdiv領域をクリックしてみてください。イベントはred/blueと伝わっていきますが、最後のアラートにokを押してもリンクしません。これはイベントをブラウザに渡していないためです。stopPropagationと合わせて覚えておくと良いでしょう。

returnでfalseを返す

ネットや書籍ではstopPropagationメソッドを利用する代わりにreturnでfalseを返すサンプルが見受けられます。この２つは同じ機能のように見えて異なります。returnでfalseを返す場合はstopPropagationだけでなくpreventDefaultの機能も持っているのです（これを説明するためにpreventDefaultを紹介しました）。このことを理解していないと意図せずリンクできない状態になってしまうので覚えておきましょう。

サンプル（02/12_08.html）のjQuery部分を確認して下さい。以下の様にreturnでfalseを返すようにしました。緑色のdiv領域をクリックするとイベントが伝播しないことが確認できます。

またbodyのソースを見て、divを囲むaタグがあるのを確認して下さい。しかし緑のdiv領域をクリックしてもリンクしませんでした。このようにreturnでfalseを返すとイベントを伝播させず、ブラウザにも渡さないことが確認できます。用途に合わせて使い分けるようにしましょう。

$(document).on("click", "div", function (eo) {
	alert(this.id);
	return false;
})

次回はイベントフローを理解していないと区別の付きにくいmouseOverとmouseEnterの違いを説明します。

次のページ：mouseenterって？