jQuery on()によるイベント処理の使い方まとめ

今回は、jQueryでよく使われるon()メソッドについて解説します。

jQueryのon()メソッドとは？

jQueryのon()メソッドは、選択されたHTML要素に一つまたは複数のイベントハンドラーを添付するための強力なメソッドです。

基本的な構文は次の通りです。

$(selector).on(イベント名, セレクタ, データ, 関数);

• イベント名：必須項目。一つ以上のイベントを指定します。複数のイベントを指定する場合は空白で区切ります。
• セレクタ：オプション。特定の子要素にイベントを絞り込むために使用します。
• データ：オプション。イベントハンドラーに渡されるデータを指定します。
• 関数：必須項目。イベントが発生したときに実行される関数を指定します。

主なイベント

主なイベントは次の通りです。

この表にある「イベント名」の部分をon()の引数に指定することで、それぞれのイベント処理を実装することができます。

使用例

簡単な例

以下に、on()メソッドの簡単な使用例を示します。

<script>
$(document).ready(function(){
  $("p").on("click", function(){
    $(this).hide();
  });
});
</script>

<p>クリックすると私は消えます</p>
<p>私もクリックすると消えます</p>

この例では、どちらの<p>要素をクリックしても、クリックした<p>要素が非表示になります。thisキーワードを使って、イベントが発生した特定の要素を参照しています。

複数のイベント

複数のイベントを同時に指定することも可能です。以下に示すように、イベント名を空白区切りで指定します。

$("p").on("mouseenter mouseleave", function(){
  $(this).toggleClass("highlight");
});

このコードは、マウスカーソルが<p>要素に入るか出るときに、その要素のクラスを”highlight”に切り替えます。

同時にに扱う例

以下は、クリックイベントとダブルクリックイベントを同時に扱う例です。

$("button").on("click dblclick", function(event){
  if(event.type === "click"){
    $("#output").text("You have clicked the button");
  } else if(event.type === "dblclick"){
    $("#output").text("You have double clicked the button");
  }
});

このコードは、ボタンがクリックされたときとダブルクリックされたときに異なるテキストを出力します。

「on()」と「click()」の違い

on() と click() は、クリックイベントなどのユーザー操作に対して反応するために使用しますが、いくつかの重要な違いがあります。

click() メソッドは、要素に対するクリックイベントを処理します。それは特定の要素がクリックされたときに発火します。

$("p").click(function(){
  alert("段落がクリックされました。");
});

一方、on() メソッドはより一般的なイベントハンドラで、クリックイベントだけでなく、他の全てのイベントタイプ（例えばマウスオーバー、キープレスなど）にも対応しています。

さらに、on()メソッドは、動的に生成された要素（ページの読み込み後にJavaScriptによって追加された要素）に対してもイベントハンドラを適用することができます。これは、click() メソッドではできません。

$("p").on("click", function(){
  alert("段落がクリックされました。");
});

上記のコードは、段落がクリックされたときにアラートを表示します。

要約すると、click() は特定のクリックイベントに対するショートカットメソッドで、on() はより一般的なイベントハンドラで、動的に生成された要素や、クリック以外のイベントにも対応できます。