jQueryとのイベント委任

コアポイント

JQueryのイベント代表は、個々の要素に接続された複数のハンドラーの代わりに、単一のイベントハンドラーを親要素に添付し、それによりメモリの使用量を削減し、パフォーマンスを改善するための手法です。
jQuery関数
• を使用してイベントデリゲートを実装でき、オプションの2番目のパラメーターは、デリゲートイベントハンドラーのセレクターを指定します。次に、on()属性を使用して、どの要素がイベントをトリガーしたかを識別します。 event.target
動的アプリケーションでは、要素が追加または削除されることがよくあり、イベントの代表者は、イベントを手動で管理し、コードの複雑さを削減する必要性を排除するため、特に便利です。ただし、イベントハンドラーがイベントハンドラーを委任する前にハンドルを処理することに注意してください。イベントの伝播を防ぐ可能性があります。

jQueryは、JavaScriptでのイベント処理を簡素化します。ただし、イベントハンドラーが多いほど、メモリが使用されます。これにより、最終的にはパフォーマンスの劣化につながり、UIが遅くなります。この記事では、イベントの代表者がこれを防ぐのに役立つ方法と、イベント代表者をjQueryにどのように適用できるかについて説明します。イベントデリゲートは、イベントハンドラーを各要素に直接追加する代わりに、これらの要素の親要素に単一のイベントハンドラーを追加して、子供の要素を聞くことです。イベントを処理するときは、どの要素がイベントをトリガーし、それに応じて応答するかを確認します。イベント代表者は、DOMのイベントバブルに依存します。これは、ドキュメントに到達するまで、親要素とその親要素などにDOMツリーに伝播する子供にトリガーされるイベントのプロセスです。プログラマーは

を使用してバブルを停止できます。すべてのDOMイベントが伝播するわけではないことに注意してください。イベントデリゲートは、複数のイベントハンドラーを単一のイベントハンドラーに置き換えるため、メモリを使用するメモリが少なくなります。たとえば、10のリンクのリストにある各リンクにイベントハンドラーを添付すると、メモリスペースを取り付ける10のイベントハンドラーがあります。代わりに、イベントデリゲートを使用して親要素でイベントを処理する場合、各リンクに添付されたメモリよりも1つのイベントハンドラーのみが作成され、メモリが少なくなります。メモリ消費の削減に加えて、イベント委任には次の利点があります。 event.stopPropagation()

要素を追加したり、DOMから要素を削除したりするときに、イベントを手動で管理する必要はありません。従来のイベント処理を使用する場合、イベントハンドラーをDOMに追加した要素に添付し、DOMから削除された要素からイベントハンドラーを削除する必要があります。

• イベントハンドラーが少なく管理するコードを削減します。これにより、イベント処理ロジックを複製することなくコードをより簡単にすることができます。これにより、JavaScriptを簡潔に乾燥させることができます。

jQueryのイベント代表団の例

子猫の写真を販売する単一のページアプリケーションを開発しているとします。ページが読み込まれると、上位20個の子猫が表示されます。ユーザーがページを下にスクロールすると、より多くの子猫がロードされます。私たちのhtmlは次のようになります：

<div id="cats">
  <ul>
    <li>
      <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt=""/>
      <a href="https://www.php.cn/link/207f170979dd72ff5776e20d07c28732">More info</a>
      <button>Add to cart</button>
    </li>
    ...
  </ul>
</div>

従来のイベント処理を使用して、イベントハンドラーを以下に接続する必要があります。

ユーザーがサムネイルをクリックすると、大きな画像が表示されます。
ユーザーが「詳細情報」リンクをクリックすると、詳細情報が表示されます。
ユーザーが「カートに追加」をクリックすると、画像をカートに追加します。
これらの3つのイベントを、ユーザーがページを下にスクロールしたときに追加された新しいDOM要素に添付します。

このコードは、次の例に似ています。これは、個々の要素にイベントハンドラーを追加することがイベントデリゲートを使用することとどのように異なるかを示すことを目的としているため、

、loadImage()、moreInfo()、およびaddToCart()関数の実装は提供されていないことに注意してください。 loadNewKittens()

$(document).ready(function() {
  var cats = $('#cats');

  cats.find('img')
    .on('click', function() {
      loadImage();
    })

  cats.find('a')
    .on('click', function(event) {
      event.preventDefault();
      moreInfo();
    });

  cats.find('button')
    .on('click', function() {
      addToCart();
    });

  $(window).scroll(function() {
    var fragment = loadNewKittens();
    // 为新的DOM元素附加事件处理程序
    fragment.find('img')
      .on('click', function() {
        loadImage();
      });

    fragment.find('a')
      .on('click', function(event) {
        event.preventDefault();
        moreInfo();
      });

    fragment.find('button')
      .on('click', function() {
        addToCart();
      });

    fragment.appendTo('#cats ul');
  });
});

コードボリュームは非常に大きいです。イベント代表を使用している場合、コードがどのように見えるか見てみましょう：

$(document).ready(function() {
  $('#cats')
    .on('click', 'img, a, button', function(event) {
      event.preventDefault();
      var target = event.target;

      switch(target.tagName.toLowerCase()) {
        case 'img':
          loadImage();
          break;
        case 'a':
          moreInfo();
          break;
        case 'button':
          addToCart();
          break;
        default:
          // 什么也不做
      }
    });

  $(window).scroll(function() {
    var fragment = loadNewKittens();
    fragment.appendTo('#cats ul');
  });
});

キーは、オプションの2番目のパラメーターの

にあります。ここでセレクターを渡すことにより、on()は、直接バインドされたイベントハンドラーの代わりに、デリゲートイベントハンドラーを処理していることを知っています。イベント処理コードは今でははるかに簡単です。 on()を取得し、そのevent.targetに基づいて切り替えることにより、どの要素がイベントをトリガーしたかを判断し、それに応じて応答できます。さらに、これらの新しい要素によってトリガーされたイベントが親要素に委任されるため、イベントハンドラーをtagNameにロードされた要素に接続する必要はなくなりました。イベントデリゲートを使用する際に注目すべき潜在的な「トラップ」は、デリゲートイベントハンドラーがトリガー$(window).scrollの前に、子要素に接続されたすべてのイベントハンドラーが処理されることです。したがって、サブイベントのハンドラーはまたはReturn を呼び出すことができます。これにより、イベントがデリゲートイベントハンドラーに泡立つのを防ぎ、イベントが委任されない理由について困惑させます。 event.stopPropagation() false

結論

この記事では、イベントの委任を研究します。私たちは、それが耐えなければならないイベントの処理負荷を減らすことにより、ウェブサイトのパフォーマンスを改善するのにどのように役立つかを見てきました。また、関数を介してjQueryにイベントデリゲートを実装する方法も見ました。

on()jQueryイベント代表団についてよく尋ねられる質問

jqueryのイベント代表とは何ですか？なぜそれが重要なのですか？ JQueryのイベント代表は、単一のイベントリスナーを親要素に添付できる手法です。これは、それらの子孫が現在存在するか、将来追加されているかにかかわらず、マッチングセレクターのすべての子孫を発射します。これは、アプリケーションに必要なイベントハンドラーの数を減らすことでパフォーマンスを大幅に改善できるため重要です。個々のイベントハンドラーを各要素に追加する代わりに、イベントを親要素に委任できます。これは、要素が動的に追加または削除される動的アプリケーションで特に役立ちます。

イベント委任はjqueryでどのように機能しますか？

JQueryのイベント代表者は、ほとんどのjQueryイベントがDOMツリーまで泡立つか伝播するという事実を利用しています。イベントが子要素で発生すると、親要素に泡立ちます。イベントリスナーを親要素に添付することにより、子要素のいずれかでトリガーされたイベントをキャプチャできます。

属性を使用して、どのチャイルド要素がイベントをトリガーしたかを判断できます。 event.target

直接イベントとjQueryでの委任イベントの違いは何ですか？

直接イベントは特定の要素に直接添付され、これらの要素のみがイベントをトリガーできます。一方、デリゲートイベントは親要素に添付され、子要素はイベントをトリガーできます。委任イベントの利点は、動的に追加された子要素のイベントを処理できることです。

メソッドを使用して、jQueryでイベント委任を実行する方法は？ .on()

jQueryの

メソッドは、イベントハンドラーを接続するために使用されます。イベントデリゲートの場合、イベントタイプ、子孫のフィルタリングに使用されるセレクター文字列、およびハンドラー機能の3つのパラメーターを使用します。イベントタイプは、イベントタイプ（「クリック」など）を表す文字列です。セレクター文字列は、イベントをトリガーする選択された要素の子孫をフィルタリングするために使用され、ハンドラー関数はイベントの場合に実行される関数ですトリガー。 .on()

イベントデリゲートを使用して、jQueryで動的に追加された要素を処理できますか？

はい、jQueryのイベント代表者の主な利点の1つは、動的に追加された要素のイベントを処理できることです。イベントリスナーは親要素に添付されるため、イベントリスナーが添付された後にそれらのイベントが追加されたとしても、子要素のいずれかでトリガーされたイベントをキャプチャできます。

イベントバブルとは何ですか？また、jQueryでのイベント代表団と何が関係していますか？

イベントバブルは、イベントの伝播タイプで、イベントはそれをトリガーし、その祖先に泡立つ特定の要素から始まります。 jQueryのイベント代表者は、イベントのバブルを使用して、イベントリスナーを親要素に添付します。イベントが子供の要素で解雇されると、イベントリスナーがそれをキャプチャできる親要素に泡立ちます。

jQueryでのイベントの伝播を停止する方法は？

メソッドを使用して、jQueryでのイベントの伝播を停止できます。この方法により、イベントがDOMツリーに泡立つのを防ぐため、親ハンドラーがイベント通知を受信するのを防ぎます。ただし、コードをデバッグして理解するのが難しくなるため、注意して使用する必要があります。 .stopPropagation() jQueryでのイベント処理に使用される

と

の方法の違いは何ですか？ .bind() .on() jQueryの

メソッドは、イベントハンドラーを要素に直接接続するために使用されます。一方、メソッドを使用して、イベントハンドラーを要素（.bind()など）またはイベント委任の親要素に直接接続できます。 .on()メソッドはより一般的であり、jqueryにイベントハンドラーを添付するための好ましい方法です。 .bind()

イベントデリゲートを使用してjQueryのカスタムイベントを処理できますか？

はい、イベントデリゲートを使用して、jQueryのカスタムイベントを処理できます。標準イベントと同様に、イベントリスナーを親要素に添付することができます。これにより、子供のいずれかにトリガーされたカスタムイベントをキャプチャできます。

jqueryでイベントハンドラーを削除する方法は？

.off()メソッドを使用して、jqueryのイベントハンドラーを削除できます。この方法は、すべてのイベントハンドラーを要素上のすべてのイベントハンドラーを削除するか、特定のイベントタイプまたは名前空間を備えたイベントハンドラーのみを削除することができます。

以上がjQueryとのイベント委任の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。