JSイベント委譲例の詳しい説明

この記事では主に JS イベント委任の例について詳しく説明します。まず分析を見てみましょう。イベント プロキシとも呼ばれ、バブリングの原理を使用してイベントを親に追加し、実行効果をトリガーします。 。

まず、次のようなプログラムを書いたはずです。リストがあり、マウスが各liに移動すると、背景色が赤に変わるので、次のコードを書きました:

(私が与えたコードは一般的にはキーコードは自分で HTML に書くことができます。)

window.onload =  oUl = document.getElementById('ull' aLi = document.getElementsByTagName('li'); 
    ( i =0;i <p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);"> もちろん、ループを通じて各 li にイベントを追加しますが、li がたくさんある場合、それが必要か考えてください。イベントを何度も追加するには、実際には非常にパフォーマンスがかかります。では、イベントを 1 つ追加するだけでそれを達成できるかどうかを考えます。もちろんそれは可能ですが、そうでなければ私はそれについて話すことはありません。 </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);"> これは、バブリング原理によるイベント委任です。イベントを親 oUL にのみ追加できるため、どの li が移動されても、親の move イベントがトリガーされます (バブリングを理解していなくても、次のようにできます)。私の JS バブリングの記事を参照してください) が、この時点では問題もあります。なぜなら、私の要件は、リスト全体ではなく、対応する li の色を変更することだからです。この時点で、マウスがどの LI に移動したかをどのように認識するのでしょうか。時間、ユニバーサル イベント オブジェクト 属性の 1 つが表示されようとしています。これはイベント ソース (イベントがどの要素にバインドされているかに関係なく、実際にイベントをトリガーするターゲットを指します) です。これにより、LI を取得できます。現在のマウスが見つかります </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">しかし、これには IE と標準の間で互換性の問題が異なります。標準はブラウザの新しいバージョンを参照しています </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">IE: window.event.srcElement<br>Standard:event.target</p> そのため、互換性を確保する必要があります。 、これも非常に簡単です。 <p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);"></p>以下のコード全体を見てください: <p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);"></p><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;white-space:pre-wrap;font-family:'Courier New';" class="brush:php;toolbar:false;">window.onload = function(){ 
    var oUl = document.getElementById('ull');     var aLi = document.getElementsByTagName('li');

  oUl.onmouseover = function(ev){ 
     var event = ev||window.event;  // 获取event对象     var target = ev.target || ev.srcElement; // 获取触发事件的目标对象    
     if(target.nodeName.toLowerCase() == 'li'){  //判断目标对象是不是li
         target.style.background = 'red';
     }

  }
代码中加了一个标签名的判断，主要原因是如果不加判断，当你鼠标移入到父级oUL上面的时候，整个列表就会变红，这不是我们想要的结果，所以要判断一下。

target.nodeName 弹出的名字是大写的，所以需要转换大小写再比较。

このようにして要件全体が完成し、リストが多い場合のパフォーマンスが大幅に向上します。

実際、イベント委任には 2 番目の利点があります。新しく追加された要素には以前のイベントも含まれることになります

別の要件があるとします。ボタンをクリックして、リストに別の li を作成します。この時点で、一般的な方法では次のようになります。新しく作成された li にはイベントが追加されていないため、移動して赤くなる機能はありませんが、イベント委任メソッドを使用すると、新しい li にもこのイベントが追加されます。父親が存在する場合、イベントはそこに追加されるため、原理は非常に簡単に適用できます。

関連する推奨事項:

js のイベントバブリング、イベントキャプチャ、イベント委任とは何ですか

イベントキャプチャとバブリングとイベントデリゲーションの比較分析

JavaScriptイベントデリゲーションの詳細説明

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