JSイベント委譲例の詳しい説明-jsチュートリアル-php.cn

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

小云云

リリース： 2018-03-13 14:59:37

オリジナル

1991 人が閲覧しました

この記事では主に 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 弹出的名字是大写的，所以需要转换大小写再比较。

ログイン後にコピー

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

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

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