JavaScriptのイベント委任とはどういう意味ですか?

JavaScript では、イベント委任はイベント ホスティングまたはイベント プロキシとも呼ばれ、ターゲット ノードのイベントを祖先ノードにバインドするもので、イベント バブリング原理を使用して特定の種類のすべてのイベントを管理します。親要素を使用して、子要素での特定の種類のイベントの処理を表します。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript では、イベント委任 (デリゲート) はイベント ホスティングまたはイベント プロキシとも呼ばれ、イベント バブリング原理を使用して特定の種類のすべてのイベントを管理し、親要素を使用して特定の種類の子要素を表します。イベントの処理方法。

これを行う利点: コードを最適化し、実行パフォーマンスを向上させ、HTML と JavaScript を完全に分離し、ノードを動的に追加または削除するプロセス中に登録されたイベントが失われるのを防ぎます。

例 1

次の例では、一般的な方法を使用して、クリック イベントをリスト構造内の各リスト項目にバインドします。リスト項目をクリックすると、プロンプト ダイアログが表示されます。ボックスがポップアップ表示され、現在のノードに含まれるテキスト情報が表示されます。ただし、リスト アイテムをリスト ボックスに動的に追加すると、新しく追加されたリスト アイテムはクリック イベントにバインドされず、これは私たちの希望に反します。

<button id="btn">添加列表项目</button>
<ul id="list">
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
</ul>
<script>
    var ul = document.getElementById("list");
    var lis = ul.getElementsByTagName("li");
    for (var i = 0; i < lis.length; i ++) {
        lis[i].addEventListener(&#39;cluick&#39;, function (e) {
            var e = e || window.event;
            var target = e.target || e.srcElement;
            alert(e.target.innerHTML);
        }, false);
    }
    var i = 4;
    var btn = document.getElementById("btn");
    btn.addEventListener("click", function() {
        var li = document.createElement("li");
        li.innerHTML = "项目列表" + i++;
        ul.appendChild(li);
    });
</script>

例 2

次の例では、イベント委任手法とイベント伝播メカニズムを使用して、クリック イベントをリスト ボックスの ul 要素にバインドします。 ulがonの場合、クリックイベントをキャプチャし、イベント処理関数で現在のイベント応答ノードタイプを検出 li要素の場合はさらに以下のコードを実行、そうでない場合はイベント処理を抜けます関数を実行し、応答を終了します。

<button id="btn">添加项目列表</button>
<ul id="list">
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
</ul>
<script>
    var ul = document.getElementById("list");
    ul.addEventListener(&#39;click&#39;, function(e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (e.target && e.target.nodeName.toUpperCase()=="LI") {
            alert(e.target.innerHTML);
        }
    }, false);
    var i = 4;
    var btn = document.getElementById("btn");
    btn.addEventListener("click", function () {
        var li = document.createElement("li");
        li.innerHTML = "项目列表" + i++;
        ul.appendChild(li);
    });
</script>

ページに多数の要素があり、各要素が 1 つ以上のイベントを登録する場合、パフォーマンスが影響を受ける可能性があります。更新された DOM ノードにアクセスして変更する場合、プログラムは遅くなります。特に、ロード (または DOMContentReady) イベントでイベント接続プロセスが発生する場合、これはリッチ インタラクティブ Web ページにとって多忙な時間帯です。さらに、ブラウザーは各イベント ハンドラーのレコードを保存する必要があるため、より多くのメモリを占有することになります。

[推奨学習: JavaScript 上級チュートリアル]

以上がJavaScriptのイベント委任とはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。