この記事では主に 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 のイベントバブリング、イベントキャプチャ、イベント委任とは何ですか
イベントキャプチャとバブリングとイベントデリゲーションの比較分析
以上がJSイベント委譲例の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。