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

時計 2022.07.19 / 時計

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

記事では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>ボタン1</button>

<!— フォームのボタン要素 -->
<form>
    <input type="button" value="ボタン2">
</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()メソッドの特徴として以下のことが上げられます。

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

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

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

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">ボタン2</button>');
});
$(document).on('click', '#button2', function () {
  $(this).css('background', 'blue');
});
</script>

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

click()とon()の違い

click()メソッドとon()メソッドの大きな違いは、処理を実行する引き金となるイベントの種類です。click()メソッドはクリックイベントのみに対して、on()メソッドは様々なイベントを対象にできます。また要素に対して複数のイベントと処理を指定できます。

またclick()メソッドではon()メソッドのように動的に追加された要素に対してイベントを指定することはできません。

これらのことからもわかるように、基本的にはon()メソッドを利用することをお勧めします。on()の代わりにclick()を利用するメリットはないと言えます。

しいてメリットをあげるとすると、クリックイベントを指定する場合、click()の方が書くコード量が少ないです。(onではon("click", handler)となるため)

click()メソッドとon()メソッドの違いをまとめると次のようになります。

  1. click()メソッドはクリックイベントのみ(on()は様々なイベントを指定可能)
  2. click()メソッドでは動的に追加された要素に対してイベントを指定することはできない

これらの違いを理解して利用するようにしましょう。