2017/8/3更新

jQueryでクリックイベントで処理を実行する：on(), click()

ある要素をクリックしたらある処理を実行するというのは、JavaScriptでは定番のコーディングです。

jQueryを使わずに、以下のようにonclickを使い記述することもありますが、最近ではHTMLとJavascriptが混在しているのはあまり良いコーディングとはされていません。

「デザイン(CSS)と構造(HTML)は分離させること」はJavaScriptも同じです。

<a onclick="alert('hello, world')">クリックしてください</p>

1	<a onclick="alert('hello, world')">クリックしてください</p>

そこで、今回はクリックイベントを元にした処理をjQueryでスマートに記述する方法について紹介します。

イベントを指定するon()

バージョン1.7から追加された、on()メソッドを使ったクリックイベントの処理です。

指定した要素がクリックされた場合、イベントハンドラ「function(){〜}」で記述した処理が実行されます。

以下の例は、ボタンをクリックすると、「クリックされました」というアラートが出るサンプルです。

HTML

<button id="button">ボタン</button>

1	<button id="button">ボタン</button>

jQuery

$('#button').on('click', function() {
  alert("クリックされました");
});

$('#button').on('click', function() {

alert("クリックされました");

});

複数のイベントを定義できる

またon()メソッドでは、引数にキーにイベントタイプ、値にイベントハンドラを指定したオブジェクトを渡すことで複数のイベントを定義できます。

$('#button').on({
  //ひとつ目のイベントハンドラ
  'mouseenter': function() {
    alert("マウスオーバーされました");
  },
  //ふたつ目のイベントハンドラ
  'mouseleave': function() {
    alert("マウスアウトされました");
  }
});

$('#button').on({

//ひとつ目のイベントハンドラ

'mouseenter': function() {

alert("マウスオーバーされました");

//ふたつ目のイベントハンドラ

'mouseleave': function() {

alert("マウスアウトされました");

}

});

live(), bind(), delegate()は非推奨

似たようなメソッドで、live(), bind(), delegate() がありますが、jQueryのAPIドキュメントではこれら３つのメソッドを統合したon()メソッドを使うことが推奨されています。

.live()はバージョン1.9で削除されており、バージョン1.7以上のjQueryを使う場合は.on()を使用してイベントハンドラをすると良いでしょう。

クリックイベントで処理を実行するclick()

jQueryのちょっと古いコードを読むとよく見るのがこのclick()メソッドです。

jQuery

$('#button').click(function() {
  alert("クリックされました");
});

$('#button').click(function() {

alert("クリックされました");

});

click()ではなくon()を使うことが推奨

on()が登場してから、click()メソッドは「.on( "click", handler )」のショートカットとなっています。

また、on()メソッドと比較すると、複数イベントを定義できないといったデメリットもあるのでon()を使うほうがよいでしょう。

jQuery