コアポイント

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

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

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

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

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

jQueryのイベント代表団の例

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

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

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

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

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

、loadImage()、moreInfo()、およびaddToCart()関數(shù)の実裝は提供されていないことに注意してください。 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

結(jié)論

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

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

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

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

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

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

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

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

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

jQueryの

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

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

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

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

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

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

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

と

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

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

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

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

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

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

以上がjQueryとのイベント委任の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。