onclick 属性はもう古い？jQuery の onclick でスマートなイベント処理を実現！

2024-04-03

jQueryの onclick と onclick 属性の違い

機能	jQuery の `onclick`	onclick 属性
イベントの追加	複数回追加可能	1回のみ
イベントの削除	容易	やや複雑
コードの簡潔性	簡潔	冗長
動作	高速	若干遅延
汎用性	高い	低い

詳細解説

イベントの追加

jQuery の onclick

$(function() {
  $("#button").click(function() {
    // 処理
  });
});

上記のように、click() メソッドを使ってイベントを追加できます。同じ要素に複数回のイベント追加も可能です。

onclick 属性

<button onclick="処理()">ボタン</button>

HTML コード内に直接記述するため、コードが冗長になりがちです。また、1つの要素に設定できるイベントは1つのみです。

$(function() {
  $("#button").off("click");
});

off() メソッドを使って、簡単にイベントを削除できます。

JavaScript コードを使って削除する必要があります。

コードが簡潔で読みやすいです。

HTML コード内にJavaScript コードを記述するため、コードが冗長になりがちです。

イベント処理が高速です。

jQuery の onclick よりも若干動作が遅くなります。

様々な要素にイベントを追加できます。

主にボタン要素で使用されます。

jQuery の onclick は、イベントの追加や削除が容易で、コードも簡潔に書けます。一方、onclick 属性はコードが冗長になりがちで、汎用性も低いです。

使い分け

複数のイベントを追加したい場合
イベントを簡単に削除したい場合
コードの簡潔性を重視する場合

は、jQuery の onclick を使用するのがおすすめです。

シンプルな処理で、イベントを追加する要素が限られている場合

は、onclick 属性を使用しても問題ありません。

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

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

<button onclick="alert('クリックされました！')">ボタン</button>

上記2つのコードは、いずれもボタンをクリックすると「クリックされました！」というアラートを表示します。

その他のサンプル

jQuery で要素の色を変える

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

<p id="text">テキスト</p>

$(function() {
  $("#button").click(function() {
    $("#text").css("color", "red");
  });
});

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

<p id="text">テキスト</p>

$(function() {
  $("#button").click(function() {
    $("#text").hide();
  });
});

jQuery の onclick 以外のイベント処理方法

on() メソッド

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

イベント делегированиеは、子要素に発生したイベントを親要素で処理する方法です。

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

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

イベントオブジェクトには、イベントに関する様々な情報が格納されています。

$(function() {
  $("#button").click(function(event) {
    // イベントオブジェクトの内容を取得
    var x = event.clientX;
    var y = event.clientY;

    alert("X座標: " + x + ", Y座標: " + y);
  });
});

上記コードは、ボタンをクリックしたときのマウス座標を取得し、アラートで表示します。

イベントのキャンセル

preventDefault() メソッドを使って、イベントのデフォルト動作をキャンセルできます。

$(function() {
  $("#button").click(function(event) {
    // イベントのデフォルト動作をキャンセル
    event.preventDefault();

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

上記コードは、ボタンをクリックしても、リンク先のページに遷移しません。

イベントの伝播

stopPropagation() メソッドを使って、イベントの伝播を止めることができます。

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

$(function() {
  $("#button").click(function(event) {
    // イベントの伝播を止める
    event.stopPropagation();

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

  $("#parent").click(function() {
    alert("親要素がクリックされました！");
  });
});