jQuery の live() メソッドと on() メソッド：動的に読み込まれた HTML にクリックイベントを追加する場合の比較

2024-07-27

jQuery には、動的に読み込まれた HTML 要素にイベントハンドラーを割り当てるために使用できる 2 つの主要なメソッド、live() と on() があります。どちらも同じ目的に使用できますが、それぞれ異なる動作と利点があります。

live() メソッド

live() メソッドは、jQuery 1.7 以前で使用されていた古い方法です。このメソッドは、イベントハンドラーをドキュメントオブジェクトに割り当て、イベントが発生したときにハンドラーが実行されるようにします。ハンドラーは、イベントのターゲット要素がセレクターに一致するかどうかを判断し、一致する場合のみ実行されます。

例：live() メソッドの使用

$(document).live('click', '.my-element', function() {
  // クリックされた要素を処理する
});

この例では、.my-element クラスを持つすべての要素に対する click イベントを処理するイベントハンドラーが登録されます。動的に読み込まれた要素であっても、このイベントハンドラーは有効になります。

on() メソッド

on() メソッドは、jQuery 1.7 以降で使用される新しい方法です。このメソッドは、イベントハンドラーを特定の要素または要素のセットに直接割り当てることができます。イベントハンドラーは、イベントのターゲット要素がセレクターに一致するかどうかを判断し、一致する場合のみ実行されます。

$(document).on('click', '.my-element', function() {
  // クリックされた要素を処理する
});

この例は live() メソッドの例と同じですが、on() メソッドを使用しています。

live() メソッドと on() メソッドの比較

機能	`live()` メソッド	`on()` メソッド
対象	ドキュメントオブジェクト	特定の要素または要素のセット
パフォーマンス	遅延が発生する可能性がある	高速
柔軟性	セレクターのみでイベントを処理	イベントの種類、データ、命名空間などを指定できる
互換性	jQuery 1.7 以前	jQuery 1.7 以降

一般的に、on() メソッドは live() メソッドよりも推奨されます。これは、on() メソッドの方がパフォーマンスが速く、柔軟性が高く、バグが発生する可能性が低いからです。

動的に読み込まれた HTML にイベントハンドラーを割り当てるための最善の方法

on() メソッドを使用する: これが最も一般的で推奨される方法です。
イベント委譲を使用する: これは、親要素にイベントハンドラーを割り当て、イベントターゲットが子要素である場合にのみハンドラーを実行する方法です。
イベントバブリングを使用する: これは、イベントが要素ツリーを上に向かって伝播していくことを利用して、イベントハンドラーを割り当てる方法です。

<!DOCTYPE html>
<html>
<head>
  <title>Live vs. On Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="add-button">要素を追加</button>
  <div id="container"></div>

  <script>
    $(document).ready(function() {
      // `live()` メソッドの使用
      $(document).live('click', '.my-element', function() {
        alert('`live()` メソッドでクリックされました！');
      });

      // `on()` メソッドの使用
      $(document).on('click', '.my-element', function() {
        alert('`on()` メソッドでクリックされました！');
      });

      // ボタンをクリックして要素を追加
      $('#add-button').click(function() {
        $('#container').append('<div class="my-element">新しい要素</div>');
      });
    });
  </script>
</body>
</html>

説明

このコードでは、以下の処理が行われます。

2 つのボタン、add-button と container が作成されます。
live() メソッドと on() メソッドを使用して、.my-element クラスを持つすべての要素に対する click イベントを処理するイベントハンドラーが登録されます。
add-button がクリックされると、container 要素に新しい .my-element 要素が追加されます。

新しい .my-element 要素をクリックすると、live() メソッドと on() メソッドによって登録されたイベントハンドラーが実行され、アラートが表示されます。

この例では、live() メソッドと on() メソッドの両方の動作を確認できます。

この例では、jQuery 3.6.0 を使用しています。

イベント委譲は、親要素にイベントハンドラーを割り当て、イベントターゲットが子要素である場合にのみハンドラーを実行する方法です。この方法は、パフォーマンスが速く、コードが簡潔になるという利点があります。

例：イベント委譲の使用

$(document).on('click', '.container', function(event) {
  // クリックされた要素が `.my-element` クラスを持つ場合は処理する
  if ($(event.target).hasClass('my-element')) {
    alert('イベント委譲でクリックされました！');
  }
});

この例では、.container 要素に対する click イベントを処理するイベントハンドラーが登録されます。イベントハンドラーは、イベントターゲットが .my-element クラスを持つかどうかを確認し、一致する場合のみアラートを表示します。

イベントバブリング

イベントバブリングは、イベントが要素ツリーを上に向かって伝播していくことを利用して、イベントハンドラーを割り当てる方法です。この方法は、シンプルでわかりやすいという利点があります。

例：イベントバブリングの使用

$(document).on('click', '.my-element', function() {
  alert('イベントバブリングでクリックされました！');
});

この例は、.my-element クラスを持つすべての要素に対する click イベントを処理するイベントハンドラーを登録します。イベントハンドラーは、イベントがバブルアップしてきたときに実行されます。

上記以外にも、動的に読み込まれた HTML にイベントを追加する方法はいくつかあります。

MutationObserver API を使用する: この API を使用すると、DOM に変更が加えられたときにイベントを発生させることができます。
カスタムイベントを使用する: カスタムイベントは、独自のイベントを作成して発行できる方法です。

最善の方法の選択

使用する方法は、状況によって異なります。イベント委譲は、パフォーマンスが速く、コードが簡潔になるため、多くの場合最良の方法です。ただし、イベントターゲットが常に親要素の子要素であるとは限らない場合は、イベントバブリングの方が適している場合があります。カスタムイベントは、独自のイベントを発生させる必要がある場合に役立ちます。

javascript jquery events