jQuery入門講座使い方-イベントハンドラのon

イベントハンドラのon

イベントハンドラ：イベントを扱う仕組み

２章の最初にイベントが２つに分類できると説明しました。まずはこれについて詳しく説明したいと思います。これまでclickやhoverは「clickイベント」や「hoverイベント」と後ろに必ず「イベント」を付けていました。しかし前ページのbindやliveなどは意図的に「liveイベント」としていません。

イベントとは１章のreadyの所で説明したようにいつ実行するか指定する仕組みです。ですからclickイベントであれば「クリックしたとき」と訳せるのです。しかしliveや、これから紹介するonは、そのようには訳せません。「liveになったとき」や「onになったとき」ではないのです。では何かというとイベントハンドラという仕組みなのです。ハンドラは「扱う者」と訳せるので「イベントを扱う者」となります。

イベントハンドラ (event handler): イベントを扱う仕組みのことです。ver1.7移行のjQueryでは、これから説明するonだけを覚えれば充分です。

onの構文（その１）

まずは最も基本的なonの構文を紹介します。サンプル（02/06_01.html）には以下の様にソースが書かれています。ポイントはonの（）内に２つの設定があることです。１つはイベントの設定（ソースでは"click"）もう１つは実行するfunctionです（構文が変わりやすいようにfunctionをあらかじめ設定しています）。

function clickFunc() {
	$("div").text("CLICK !");
}
$(function () {	
	$("div").on("click", clickFunc);			
});

実際にサンプルでdiv領域をクリックすると、clickイベントのサンプルと同じようにdiv領域にclick!と表示されるのが確認できます。以下の様にonの構文を覚えて下さい。
※あとでonの別の構文が登場するので、タイトルに（その1）とあります。

イベントハンドラonの構文（その１）: $(セレクタ).on(イベント名, イベントが発生したときに実行する処理)

あらかじめfunctionを設定するのではなく、サンプル（02/06_02.html）のように無名関数を利用してもOKです。ソースは以下の様に見難くなりますが、無名関数を利用した方がfunction名を増やすことなくメモリ的にも優しいので、こちらの構文で書くことの方が多いです。少しずつ慣れていきましょう。

$("div").on("click", function() {
	$("div").text("CLICK !");
});

hoverやtoggleはonで利用できません

onはhoverやtoggleなど複数の処理を設定するイベントを利用できません。サンプル（02/06_03.html）を開いて下さい。ムリにhoverを設定してみましたが機能しないことが確認できます。onではイベントが発生したときの処理は１つしか設定できないのです。以下のソースの青字部分のように２つ設定しても機能しません。

function mouseOverFunc() {
	$("div").css("background-color", "#F93");	
}
function mouseOutFunc() {
	$("div").css("background-color", "#09C");
}
$(function () {	
	$("div").on("hover", mouseOverFunc, mouseOutFunc);			
});

ではどうするかというと、以下のソースのように単純に２つの処理に分けます。jQueryではclick以外にも様々なイベントがあり、ここではmouseoverイベントとmouseoutイベントを利用します。
サンプル（02/06_04.html）を開いて機能することを確認して下さい。

function mouseOverFunc() {
	$("div").css("background-color", "#F93");	
}
function mouseOutFunc() {
	$("div").css("background-color", "#09C");	
}
$(function () {	
	$("div").on("mouseover", mouseOverFunc);			
	$("div").on("mouseout", mouseOutFunc);			
});

捕捉：onに複数のイベントをまとめて設定

hoverは利用できないのですが、onの()内に複数のfunctionを設定したObjectオブジェクトを設定することで、まとめることができます。サンプル（02/06_05.html）のソースを確認して下さい。以下の様に分かりにくいので覚えなくても良いと思います。

funcObj = {
	mouseover:function(){
		$("div").css("background-color", "#F93");	
	},
	mouseout:function(){
		$("div").css("background-color", "#09C");	
	}
}
		
$(function () {	
	$("div").on(funcObj);			
});

1行目から8行目がObjectオブジェクトの設定です。これはjQuery特有ではなくjavascriptのものです。以下の様な構造をとり、データの管理などに利用されます。このサンプルではmouseoverやmouseoutがプロパティ名で：に続くfunctionが値となっています。このようなfunctionを設定したObjectオブジェクトをonの()に設定することで機能させることができます。ちなみにこの方法でもtoggleっぽいことはできません。

Objectオブジェクト: オブジェクト名 = {プロパティ名:値, プロパティ名:値, ……}

捕捉：複数のイベントを設定

前述のようにonは複数の処理は設定できないのですが、イベントの部分には複数設定することが可能です。その場合は以下のソースの様に（ダブル）クォートの中に半角スペースを挟んで設定します。,（カンマ）では無いことに注意して下さい。

サンプル（02/06_06.html）で確認しましょう。このサンプルではクリックしたときと、マウスオーバーしたときにアラートが表示されます。便利そうですが使う機会は少なく、スマートフォン用のコンテンツを作成する際にPCでも動作確認できるように設定こと時などに使用します。

function alertFunc() {
	alert("action!");
}
$(function () {	
	$("div").on("click  mouseenter", alertFunc);			
});

このようにhoverやtoggleが利用できないのですが、それを補って余りあるメリットがあるのでサンプルでは頻繁に登場します。次回はonのメリットである「ライブ」であるということについて説明します。

次のページ：ライブということ