JSイベント委任の例のまとめ

イベント委任はイベントプロキシとも呼ばれます。簡単に言うと、イベントを親にバインドし、子要素のバブリングイベントをリッスンします。イベントバブリングとは何かについて、ご不明な点がございましたら、js のイベントをクリックしてください。イベントバブリングの詳細な説明が記載されています。イベント委任を使用する際に知っておくべきことは何ですか?

1. イベント委任を使用する場合は、イベントオブジェクトの下のイベントソースという概念も理解する必要があります

イベントソース: イベントでは、現在操作されている要素がイベントソースです。たとえば、a ラベルをクリックして onclick イベントが発生した場合、イベント ソースは a ラベルになります。 li をクリックして onclick イベントが発生した場合、イベント ソースは li になります。

IE の場合: window.event.srcElement;

標準:event.target

互換処理: var target = ev.target||ev.srcElement

2. 現在の要素のタグ名を検索します:nodeName ( Ifこれは大文字です。toLowerCase() メソッドを使用して小文字に変換する必要があります)

たくさん書いてきましたが、イベント委任を使用する利点は何でしょうか?

1. パフォーマンスを向上させることができます

2. 新しく追加された要素には以前のイベントも含まれます

それがどこに反映されるかについては、例を使用して感じてみましょう

HTML コード

<ul id="ul1">
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
</ul>

効果は次のとおりですマウスがリの中に移動すると、対応するリの背景色が赤に変わり、マウスを移動させると元の色に変わります

一般的な書き方だとこんな感じです

<script>
var oUl = document.querySelector(&#39;#ul1&#39;);
var aLi = oUl.querySelectorAll(&#39;li&#39;);
for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
        this.style.background = &#39;red&#39;;
    }
    aLi[i].onmouseout = function(){
        this.style.background = &#39;&#39;;
    }
}
</script>

イベント委任の使い方を見てみましょう

<script>
var oUl = document.querySelector(&#39;#ul1&#39;);
oUl.onmouseover = function(ev){
    var ev = ev||event;//兼容性处理
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;red&#39;;
    }
}
oUl.onmouseout = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;&#39;;
    }
}
</script>

上記の方法では、各Liにクリックイベントをバインドする必要があります。次の方法では、Liの数が少ない場合、クリックイベントを親にバインドするだけです。 Li がたくさんある場合は、イベント委任によってパフォーマンスが大幅に向上すると考えられます

例 2、

HTML コード

<ul id="ul1">
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
</ul>
按钮

ボタンがクリックされたときに li が ul に追加されることを期待します。マウスが内側に移動するたびに li の背景色が変更され、マウスが移動するたびに背景色が変更されます。 通常の方法を使用する場合、li を追加するたびに次のようにする必要があることがわかります。転入・転出イベントを追加するのは、実際にやってみるとわかりますが、イベントデリゲーションを使えば、転入・転出イベントを追加する必要がありません。毎回追加されますので、以下のコードを見てください(やり方は皆さん知っていると思うので書きません。以下はイベントデリゲーションを使った書き方です)

<script>
var oUl = document.querySelector(&#39;#ul1&#39;);
var oBtn = document.querySelector(&#39;#btn&#39;);
oUl.onmouseover = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;red&#39;;
    }
}
oUl.onmouseout = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;&#39;;
    }
}
oBtn.onclick = function(){
    var ali = document.createElement(&#39;li&#39;);
    ali.innerHTML = &#39;1111111111111&#39;;
    oUl.appendChild(ali);//不管我们在ul里面添加多少个li我么都不需要再次为其添加绑定事件
}
</script>

を読んだ後上記では、イベント委任は本当に便利だと思いますか?だから今すぐ使ってください！

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