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

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

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

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

window.onload =  oUl = document.getElementById('ull' aLi = document.getElementsByTagName('li'); 
    ( i =0;i < aLi.length;i++=

もちろん、ループを通じて各 li にイベントを追加しますが、li がたくさんある場合、それが必要か考えてください。イベントを何度も追加するには、実際には非常にパフォーマンスがかかります。では、イベントを 1 つ追加するだけでそれを達成できるかどうかを考えます。もちろんそれは可能ですが、そうでなければ私はそれについて話すことはありません。

これは、バブリング原理によるイベント委任です。イベントを親 oUL にのみ追加できるため、どの li が移動されても、親の move イベントがトリガーされます (バブリングを理解していなくても、次のようにできます)。私の JS バブリングの記事を参照してください) が、この時点では問題もあります。なぜなら、私の要件は、リスト全体ではなく、対応する li の色を変更することだからです。この時点で、マウスがどの LI に移動したかをどのように認識するのでしょうか。時間、ユニバーサル イベント オブジェクト 属性の 1 つが表示されようとしています。これはイベント ソース (イベントがどの要素にバインドされているかに関係なく、実際にイベントをトリガーするターゲットを指します) です。これにより、LI を取得できます。現在のマウスが見つかります

しかし、これには IE と標準の間で互換性の問題が異なります。標準はブラウザの新しいバージョンを参照しています

IE: window.event.srcElement
Standard:event.target

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 弹出的名字是大写的，所以需要转换大小写再比较。

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

関連する推奨事項:

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

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

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

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