JavaScript (jQuery) でのイベント委任

1: イベント委任とは何ですか?

イベント委任は、イベント バブリングを使用して、特定の種類のすべてのイベントを管理するイベント ハンドラーを 1 つだけ指定します。

2: イベント委任を使用する理由は何ですか?

1. JavaScript でページに追加されるイベント ハンドラーの数は、ページの全体的な実行パフォーマンスに直接関係します。なぜ？各イベント処理関数はオブジェクトであるため、オブジェクトがメモリを占有することになり、メモリ内のオブジェクトが増えるとパフォーマンスが低下します。さらに、すべてのイベント ハンドラーを事前に指定する必要があるために DOM アクセス数が発生すると、ページ全体の操作の準備が遅れることになります。
2. 多くのデータと長いリストを含むテーブルにイベントを 1 つずつ追加するのはまさに悪夢です。したがって、イベント委任により、ページの実行パフォーマンスが大幅に向上し、開発者の作業負荷が軽減されます。

3: JavaScript の例

次の HTML コードを例として取り上げ、イベント委任を使用して、マウスが li 要素をクリックすると、li 要素の背景が赤に変わることを実現します。

       <ul id = "lists">
         <li>列表1</li>
         <li>列表2</li>
          <li>列表3</li>
          <li>列表4</li>
         <li>列表5</li>
          <li>列表6</li>
   </ul>

以下は JavaScript コードです:

var lists = document.getElementById("lists"); 
          lists.addEventListener("click",function(event){
              var target = event.target;
              //防止父元素ul也触发事件
              if(target.nodeName == "LI"){
                 target.style.backgroundColor = "red";
              }
         })

リスト 4 をクリックして効果を実現します:

4: jQuery の例

jQuery のイベント委任メソッドは比較的豊富です。同じ例 例:

1. on メソッドを使用します。コードは次のとおりです。

 $(function(){
            $("#lists").on("click","li",function(event){
                 var target = $(event.target);
                 target.css("background-color","red");
             })
         })

2. delegate() メソッドを使用します。コードは次のとおりです。

$(function(){
            $("#lists").delegate("li","click",function(event){
                var target = $(event.target);
                 target.css("background-color","red");
             })
         })

on() メソッドは非常に似ています。イベント委任の記述時に delegate() メソッドに追加します。また、イベントデリゲーションを実行する際、子要素(この記事ではli)のみがイベントをトリガーし、親要素(この記事ではul)はイベントをトリガーしないため、トリガーとなる要素ノード名を判断する必要がありません。これはネイティブ JavaScript よりも大幅に優れている点です。

3. binding() メソッドを使用します。コードは次のとおりです。

$(function(){
             $("#lists").bind("click","li",function(event){
                 var target = $(event.target);
                if(target.prop("nodeName")=="LI"){
                 target.css("background-color","red");}
             })
         })

bind() メソッドは、親要素が子要素に代わってイベントを実行する場合と同じです。要素もイベントをトリガーするため、イベントをトリガーした要素の名前を判断する必要があります。さらに、bind() メソッドを使用してイベントを要素にバインドする場合は、既存の DOM 要素にのみイベントを追加でき、将来の DOM 要素にイベントを追加できないことに注意してください。

要素追加追加イベント。 DOM 要素を頻繁に追加し、新しく追加した DOM 要素にイベントをバインドする場合は、live()、delegate()、on() などのメソッドを使用します。 jQuery 1.7 以降、jQuery は live() メソッドと delegate() メソッドを推奨していないため、引き続き on() メソッドを使用する必要があります。

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