PricingLoginStart free
jQuery Academy · レッスン

堅牢なイベントデリゲーションの実装

.on()を使ったイベントデリゲーションの原則と利点を学び、単一のリスナーで複数の要素や将来追加される要素のイベントを処理してパフォーマンスを向上させます。

レッスン 1/311 ステップ

「堅牢なイベントデリゲーションの実装」はCoddyKit上の無料jQuery Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全3レッスンが含まれています。

イベントデリゲーションとは

イベントデリゲーションへようこそ。この強力なテクニックを使うと、Webアプリケーションのイベントを効率的に管理できます。

個々の要素に多数のイベントリスナーを設定する代わりに、共通の親要素に1つのリスナーを設定します。特定の操作を監視する「管理者」が、すべての「子要素」を見守るようなものです。

直接バインドの制限

.on()などのメソッドを使って要素にイベントを直接バインドすると、リスナーが設定されるのはその時点で存在する要素だけです。その後DOMに追加された新しい要素には、イベントハンドラーが自動的に設定されません。

例の最初のボタンをクリックしてみてください。その後、少し時間が経つと新しいボタンが表示されます。新しいボタンをクリックしてみても、反応しません。

$(document).ready(function() {
  // Assume basic HTML structure like:
  // <div id="my-list">
  //   <button class="item">Button 1</button>
  //   <button class="item">Button 2</button>
  // </div>

  // Direct binding to existing items
  $('.item').on('click', function() {
    $(this).text('Directly clicked!');
  });

  // Simulate adding a new item after initial binding
  setTimeout(function() {
    $('#my-list').append('<button class="item">New Item</button>');
    console.log('A new item was added after 2 seconds.');
    console.log('Try clicking the new item - it wont respond!');
  }, 2000);
});

イベントバブリングを理解する

デリゲーションを理解するには、イベントバブリングについて知る必要があります。クリックなどのイベントが要素で発生すると、まずその要素で発生し、次に親要素、その親要素へと伝わり、documentまで上がっていきます。

event.targetプロパティは、どの親要素がイベントを受け取ったかに関係なく、常にイベントを発生させた元の要素を指します。下の要素をクリックして、コンソールの出力を確認してみましょう。

$(document).ready(function() {
  // Assume HTML like:
  // <div id="outer">
  //   <div id="middle">
  //     <button id="inner">Click Me</button>
  //   </div>
  // </div>

  $('#outer').on('click', function(event) {
    console.log('Outer div caught event. Target:', event.target.id || event.target.tagName);
  });

  $('#middle').on('click', function(event) {
    console.log('Middle div caught event. Target:', event.target.id || event.target.tagName);
  });

  $('#inner').on('click', function(event) {
    console.log('Inner button caught event. Target:', event.target.id || event.target.tagName);
  });
});

デリゲーションに使うjQueryの .on()

jQueryの.on()メソッドでは、追加のselector引数を指定することでイベントデリゲーションを利用できます。構文は次のようになります。

  • $(parentSelector).on(event, childSelector, handler);

ここでは、イベントリスナーをparentSelectorに設定します。ただし、handler関数が実行されるのは、childSelectorに一致する子孫要素からイベントが発生した場合だけです。

イベントデリゲーションの例

ここではイベントデリゲーションを適用して、Scene 2の問題を解決します。リスナーを親コンテナ（#my-list）に設定し、クリック元が.itemに一致する要素の場合だけ反応するように指定します。

これで、新しいボタンが表示されたときにも、クリックに反応することに注目してください。

$(document).ready(function() {
  // Assume HTML structure like:
  // <div id="my-list">
  //   <button class="item">Button 1</button>
  //   <button class="item">Button 2</button>
  // </div>

  // Event delegation: listener on the parent (#my-list)
  // It listens for clicks on any descendant matching '.item'
  $('#my-list').on('click', '.item', function() {
    $(this).text('Delegated click!');
  });

  // Simulate adding a new item after delegation setup
  setTimeout(function() {
    $('#my-list').append('<button class="item">New Delegated Item</button>');
    console.log('A new item was added after 2 seconds.');
    console.log('Try clicking the new item - it WILL respond!');
  }, 2000);
});

動的要素に対応する

前の例で示した主な利点は、イベントデリゲーションが動的に追加された要素にも適切に対応できることです。

リスナーは静的な親要素に設定されているため、childSelectorに一致する新しい子要素はすべて、その1つのリスナーの対象になります。コンテンツを追加するたびにイベントを再バインドする必要はありません。

パフォーマンスを向上させる

動的なコンテンツに対応できるだけでなく、イベントデリゲーションには大きなパフォーマンス上の利点があります。

  • リスナー数の削減: 数百の要素それぞれに個別のイベントリスナーを設定する代わりに、共通の親要素に1つだけ設定します。
  • メモリ使用量の削減: リスナーが少なくなるため、アプリケーションが消費するメモリも減ります。
  • 起動の高速化: ページの読み込み時に、ブラウザーがイベントハンドラーの設定に費やす時間が短くなります。

イベントをデリゲーションする場面

イベントデリゲーションは強力なツールですが、常に必要とは限りません。次のような場面での使用が適しています。

  • 同じ種類の要素が多数ある場合（長いリストの項目や表の行など）。
  • ページの初回読み込み後に、要素がDOMに動的に追加または削除される場合。
  • イベント処理でパフォーマンスが特に重要な場合。

デリゲーションのベストプラクティス

イベントデリゲーションの効果を最大限に引き出すには、次のベストプラクティスに従ってください。

  • 最も近い静的な親要素を選ぶ: ページの読み込み時に必ず存在する、最も近い祖先要素にデリゲーションします。より近い親要素で対応できる場合は、documentやbodyへのデリゲーションを避けてください。
  • $(this)を理解する: デリゲーションされたハンドラー内では、$(this)はリスナーが設定された親要素ではなく、childSelectorに一致した元の要素を指します。
  • バブリングに注意する: バブリングはデリゲーションに役立つ一方、適切に管理しないと意図しない副作用につながることがあります（別のレッスンで扱うevent.stopPropagation()などを使用します）。

知識を確認しましょう

次のうち、イベントデリゲーションの利用に適しているのはどのような場面でしょうか。

対話的なレッスンで答える

イベントデリゲーションの復習

よくできました。jQueryにおけるイベントデリゲーションの基本原則を学びました。

childSelectorを指定した.on()を使うと、1つの親リスナーで複数の子要素のイベントを管理できます。動的に追加された子要素にも対応できます。この手法は、パフォーマンスの向上、コードの簡潔化、jQueryアプリケーションにおける動的コンテンツの効率的な処理に欠かせません。

イベントデリゲーションを使いこなすことで、堅牢で拡張性の高いイベント処理を実現できます。

無料で開始

AI チューターと学ぶ JavaScript — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース
22
レッスン
48
無料で学習を始めるコース全体を表示

よくある質問

「堅牢なイベントデリゲーションの実装」レッスンは無料ですか？

はい。「堅牢なイベントデリゲーションの実装」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全3レッスンが含まれています。

「堅牢なイベントデリゲーションの実装」で何を学びますか？

.on()を使ったイベントデリゲーションの原則と利点を学び、単一のリスナーで複数の要素や将来追加される要素のイベントを処理してパフォーマンスを向上させます。 ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

jQuery Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。

「堅牢なイベントデリゲーションの実装」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このjQuery Academyレッスンでコードを書いて実行できますか？

はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 堅牢なイベントデリゲーションの実装
  2. イベント伝播の停止
  3. カスタムイベントの作成と発火
← jQuery Academyに戻る