JavaScript イベント委任テクノロジの説明

説明する前に、パフォーマンスについて話しましょう

ページ全体に多数のボタンがある場合、各ボタンにイベント ハンドラーをバインドする必要があります。これはパフォーマンスに影響します。オブジェクトが多くのメモリを占有すると、パフォーマンスが低下します。次に、DOM アクセスの増加により、ページの読み込みが遅くなります。非常に優れたソリューションです。

1. イベント デリゲーション

イベント ハンドラーが多すぎる問題の解決策は、イベント デリゲーション テクノロジです。

イベント デリゲーション テクノロジは、イベント バブリングを使用するだけです。イベント ハンドラー。

イベントをトリガーする必要がある親要素のイベント ハンドラーをバインドできます。

HTML コード:

<ul id="mylist">
        <li id="li_1">sdsdsd</li>
        <li id="li_2">sdsdsd</li>
        <li id="li_3">sdsdsd</li>
</ul>

次に、これら 3 つのイベント ハンドラーをバインドする必要があります...

UL バインディング イベント ハンドラー。

js コード:

obj.eventHandler($("mylist"),"click",function(e){
                    e = e || window.event;
                    switch(e.target.id){    //大家应该还记得target是事件目标,只要点击了事件的目标元素就会弹出相应的alert.
                        case "li_1":
                        alert("li_1");
                        break;
                        case "li_2":
                        alert("li_2");
                        break;
                        case "li_3":
                        alert("li_3");
                        break
                    }
                })

複雑な Web アプリケーションの場合、この種のイベント委任は非常に実用的です。

このメソッドを使用しない場合は、1 つずつ実行してください。バインディングは無数のイベントを意味しますハンドラーです。

今のところは以上です。