【jQuery】要素のクリック時にイベント処理を実行：on()とclick()の違いについて

2022.07.19 / 2022.07.19

本記事ではjQueryにおける、要素のクリック時にイベント処理を実行するon()メソッドとclick()メソッドの違いについて解説していきます。

jQueryで指定した要素へのクリック操作を検知するにはon()またはclick()を使用します。これらの違いを区別することなくなんとなくどちらかを使っている人も多いかと思います。

しかしそれでは思わぬエラーが発生することがあります。

本記事を通してon()メソッドとclick()メソッドの違いを理解して、適切なメソッドを利用できるようにしましょう。

ここではjQueryのon()とclick()を利用したイベント処理について解説しますが、以下のように要素にonclick属性を追加してクリック時のイベント処理を指定することもできます。

<html>
    <script>
        function alert() {
            alert("要素がクリックされました");
        }
    </script>
    <body>
        <a href="#" onclick="alert()">クリックしてね</a>
    </body>
</html>

onclick要素でイベント処理を指定することは良いコーディングとはされていませんが、詳しく知りたい方は以下記事をご参照ください。

click()

click()メソッドとは

jQueryのclick()メソッドは、指定した要素へのクリック操作を検知して特定のイベント処理を実行することができるメソッドです。

主に画面に表示しているボタン要素がクリックされたときにイベント処理を実行することが多いです。

<!— ボタン要素 -->
<button>ボタン１</button>

<!— フォームのボタン要素 -->
<form>
    <input type="button" value="ボタン２">
</form>

もちろんボタンだけでなく、テキストや画像などの要素がクリックされたときに処理を実行することもできます。

click()メソッドの使用方法

click()メソッドは以下構文で利用します。

構文

$('セレクタ').click(function(){
　　指定要素がクリックされたときに実行する処理を記述
});

click()メソッドの使用例

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

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

<script>
$('#button').click(function() {
  alert("ボタンがクリックされました");
});
</script>

上記のように対象のセレクタを指定し、クリック後に実行したいイベントを記述して利用します。

on()

on()メソッドとは

jQueryのon()メソッドは、対象要素に指定したイベントが発生したときに処理を実行することができるメソッドです。例えば、要素がクリックされたときのイベント処理を設定することができます。

jQueryのバージョン1.7からon()メソッドは追加されました。on()メソッドはjQueryに以前から存在したbind()やlive()、delegateを統合したものと言われます。

イベント発生時の実行処理はイベントハンドラfunction(){~}内に記述します。

on()メソッドの使用方法

on()メソッドは以下構文で利用します。

構文

$('セレクタ').on(イベント名[, selector] [, data], function(){
　　対象要素が指定したイベント発生時に実行する処理を記述
});

on()メソッドの使用例

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

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

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

上記ではイベントに「click」を指定し、要素がクリックされたらalertを表示するように記述しています。

on()メソッドの特徴

on()メソッドの特徴として以下のことが上げられます。

様々なイベントを検知できる
複数のイベントを定義できる
動的に追加される要素に対してもイベントの実行が可能

それぞれの特徴について詳しく解説していきます。

様々なイベントを検知できる

on()メソッドではイベント名に指定する値によって、検知するイベントを指定できます。

指定できるイベントの一例を以下に記します。

イベント名	説明
blur	要素のフォーカスがなくなったとき
change	値や選択などが変更されたとき
click	要素がクリックされたとき
dblclick	要素がダブルクリックされたとき
error	エラーが発生したとき
focus	要素がフォーカスされたとき
focusout	要素がフォーカスを外されたとき
keydown	キーボードのキーが押し下げられたとき
keypress	キーボードのキーが押されたとき
keyup	キーボードのキーが上がった時
load	リソースの読み込みが終わった時
mousedown	マウスが押されたとき
mouseenter	マウスが要素に入った時
mouseout	マウスが要素から外れたとき
scroll	スクロールされたとき
submit	フォームで送信がされたとき

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

on()メソッドでは特定の要素に対して複数のイベントを指定できます。

記述方法として、以下のようにして複数のイベントを指定します。

$('#button').on({
  //ひとつ目のイベント
  'click': function() {
    alert("クリックされました");
  },
  //ふたつ目のイベント
  'dblclick': function() {
    alert("ダブルクリックされました");
  }
});

動的に追加される要素に対してもイベントの実行が可能

on()メソッドは後から動的にjQueryで追加された要素に対してもイベントの実行が可能です。

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

<script>
$('#button').on('click', function () {
  $('#button').after('<button id="button2">ボタン２</button>');
});
$(document).on('click', '#button2', function () {
  $(this).css('background', 'blue');
});
</script>

上記ではボタンがクリックされるとボタン２を追加し、ボタン２をクリックすると背景色を変更します。