１つの要素に対して、複数のイベントを埋め込む方法を考えます。
例えば・・・
ターゲットとなる要素を、
クリックしてもダブルクリックしても、ハンドリングしたいとします。
このような場合は↓のように実装すれば問題ありません。
$(function() {
$("input").click(function(){
// ・・・clickイベント発生後の処理・・・
});
$("input").dblclick(function(){
// ・・・dblclickイベント発生後の処理・・・
});
});
・・・が、コードが冗長になってしまいますね。
このようなときに便利なのが「.on()」です。
指定の要素に対して任意のイベントを組み込むことができるようになります。
基本的な使い方は以下の通りです。
$(function() {
$("input").on('***', function(){ // ←1個以上の組み込みたいイベントを指定
// ・・・組み込んだイベント発生後の処理・・・
});
});
先ほどのclickイベントとdblclickイベントの例では、以下のように記述します。
$(function() {
$("input").on('click dblclick', function(){ // ←半角スペースで区切る
// ・・・clickイベントとdblclickイベント発生後の処理・・・
});
});
これではclickイベントとdblclickイベントに対して、
同じ処理を行うことになってしまいますね。
もし、clickイベントとdblclickイベントで、
それぞれ別の処理を実行したいのであれば、次のようにします。
$(function() {
$("input").on('click dblclick', function(eo){ // ←イベントオブジェクト[eo]を追記
if (eo.type == "click") { // ←イベントオブジェクトから発生したイベントを取り出す
// ・・・clickイベント発生後の処理・・・
} else {
// ・・・dblclickイベント発生後の処理・・・
}
});
});
もう少し応用してみます。
マウスのカーソルが「当たってから外れるまで」の間に何かしらの処理を実行します。
※今回の例では、任意の領域を消したり出したりしてます。
ここまでのやり方では、下のような感じでしょうか。
◆マウスオーバー⇒アウトの実装例（その１）
$(function() {
$("要素").on('mouseover mouseleave', function(eo){
if (eo.type == "mouseover") {
$(this).fadeOut();
} else {
$(this).fadeIn();
}
});
});
ここにマウスのカーソルを当ててください
わざわざ発生したイベントによって処理を振り分けるのは、
ちょっとややこしい印象がありますね。
これをもっとシンプルにしてみます。
◆マウスオーバー⇒アウトの実装例（その２）
$(function() {
$("要素").mouseover(function(){
$(this).fadeOut();
}).mouseleave(function(){
$(this).fadeIn();
});
});
ここにマウスのカーソルを当ててください
このようにイベントを繋いで書くことで、よりシンプルにできますね。
さらにmouseoverとmouseleaveを使うなら、hoverを使えば一発です。
◆マウスオーバー⇒アウトの実装例（ホバーを使う）（その３）
$(function() {
$("要素").hover(function(){
$(this).fadeOut();
},function(){
$(this).fadeIn();
});
});
ここにマウスのカーソルを当ててください
hoverイベントは、
カンマの前が「マウスオーバーの処理」で、
カンマの後が「マウスアウトの処理」で構成されてます。
いかがでしょうか？
要素にイベントを埋め込む方法一つ取ってもいろんな実現方法が存在します。
ケース・バイ・ケースで柔軟に対応できるようになれると良いでしょう。
それでは、また。
