イベントデリゲートで理解するjQueryのonメソッド

このエントリーはjQuery Advent Calendar 2013の 1日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。)

イベントデリゲートとonメソッドについて解説します。

onメソッドはjQuery 1.7で新たに追加されたメソッドで、それまで利用されていたbindメソッドやliveメソッド、delegeteメソッドの代わりに利用できるメソッドです。

onメソッドの使い方を理解するにはJavaScriptのイベントバブリングを利用したイベントデリゲートを知るのが一番よいでしょう。

イベントバブリングとは?

clickなどのイベントはイベントが発生した要素から親要素に伝播されます。これをイベントバブリングといいます。簡単なサンプルで解説しますと以下のように.boxAを内包した.boxBを用意します。

<div class="boxA">
	<div class="boxB"></div>
</div>

これに以下のようなCSSを適用させ全く別の場所に配置します。

.boxA,
.boxB{
	position: absolute;
	width:100px;
	height:100px;
}
.boxA{
	left:100px;
	top:100px;
	background: red;
}
.boxB{
	top:200px;
	background: blue;
}

.boxAにはclickイベントを設定しておきましょう。

$(".boxA").click(function(){
	alert("click");
});

このように設定したHTMLが以下になります。

サンプル1

赤い矩形の.boxAをクリックした際にアラートが表示されるのはわかると思いますが、青い矩形の.boxBをクリックされた際にもアラートが表示されます。これはイベントバブリングが発生したためです。

.boxBで発生したclickイベントは親要素に伝播し.boxAでもclickイベントが発生します。(さらに親要素でも発生していきます。)

イベントデリゲートとは?

上記のイベントバブリングの特長を利用したイベント設定方法をイベントデリゲートと言います。たとえば以下のようなHTMLがあったとします。

<ul>
	<li>list1</li>
	<li>list2</li>
	<li>list3</li>
	<li>list4</li>
	<li>list5</li>
</ul>

li要素がクリックされた際にli要素の内容をalert()で表示するには通常は以下のようなスクリプトを書きます。

$("li").click(function(){
	alert($(this).text());
});

サンプル2

しかしイベントデリゲートを利用すると以下のように記述できます。

$("ul").click(function(e){
	alert($(e.target).text());
});

サンプル3

li要素がクリックされた際に、クリックイベントはイベントバブリングによりul要素に伝播しul要素に指定した上記のスクリプトが実行されます。イベントオブジェクトのtargetプロパティには実際にイベントが発生した要素が入っているので、クリックされたli要素のテキストがアラートで表示されるわけです。

イベントデリゲートを利用した場合、しない場合と比べて要素に指定するイベントの数が少なくなります。その為、ブラウザメモリなどを節約し処理を早くさせることができます。

jQueryのonメソッド

jQueryのonメソッドではこのイベントデリゲートを簡単に利用できる書式が用意されています。

先ほどのスクリプトは以下のように書き換えることができます。

$("ul").on("click","li",function(){
	alert($(this).text());
});

サンプル4

セレクタでイベントを設定する要素(イベントを実行したい要素の先祖要素)を指定します、最初の引数でイベントタイプを指定、第2引数でイベントを実行したい要素をセレクタで指定します。あとは普通のイベントと同じように扱うことができます。

onメソッドを利用すると効率よくイベントが設定できますので、ぜひ利用してみてください。

あと、jQuery Advent Calendar 2013はまだ空きがあるので興味がある人はjQueryについて何か書いてみませんか?

関連エントリー

jQuery基礎文法最速マスター
jQueryを良くする25のTIPS
14のjQueryベストプラクティス
8のjQueryのすごいTIPS
Re:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips

スポンサードリンク

«CSS Nite LP, Disk 32: Sassに出演します | メイン | jQueryのmouseoverメソッドとmouseenterメソッドの違い»