Was bedeutet die Delegation von Javascript-Ereignissen?

In JavaScript wird die Ereignisdelegierung auch als Ereignis-Hosting oder Ereignis-Proxy bezeichnet. Dabei wird das Ereignis des Zielknotens an den Vorfahrenknoten gebunden. Dabei wird das Ereignis-Bubbling-Prinzip verwendet, um alle Ereignisse eines bestimmten Typs mithilfe des übergeordneten Elements zu verwalten to Stellt die Behandlungsmethode eines bestimmten Ereignistyps für untergeordnete Elemente dar.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

In JavaScript wird die Ereignisdelegation (Delegate) auch als Event-Hosting oder Event-Proxy bezeichnet. Sie verwendet das Event-Bubbling-Prinzip, um alle Ereignisse eines bestimmten Typs zu verwalten, und verwendet das übergeordnete Element, um die Verarbeitungsmethode eines bestimmten Ereignistyps darzustellen des untergeordneten Elements.

Die Vorteile dieser Vorgehensweise: Optimieren Sie den Code, verbessern Sie die Ausführungsleistung, trennen Sie HTML und JavaScript wirklich und verhindern Sie den Verlust registrierter Ereignisse während des Prozesses des dynamischen Hinzufügens oder Löschens von Knoten.

Beispiel 1

Das folgende Beispiel verwendet eine allgemeine Methode, um das Klickereignis an jedes Listenelement in der Listenstruktur zu binden. Klicken Sie auf das Listenelement, und ein Eingabeaufforderungsdialogfeld wird angezeigt, um die darin enthaltenen Textinformationen abzufragen aktueller Knoten. Wenn wir jedoch dynamisch Listenelemente zum Listenfeld hinzufügen, sind die neu hinzugefügten Listenelemente nicht an das Klickereignis gebunden, was unseren Wünschen widerspricht.

<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>

Beispiel 2

Das folgende Beispiel verwendet Ereignisdelegationstechniken und einen Ereignisweitergabemechanismus, um das Klickereignis an das Listenfeld-UL-Element zu binden. Wenn das Ereignis an den übergeordneten Knoten UL weitergegeben wird, wird das Klickereignis erfasst und Dann wird das Ereignis verarbeitet. Die Funktion erkennt den aktuellen Ereignisantwortknotentyp. Wenn es sich um ein Li-Element handelt, führen Sie den folgenden Code aus. Andernfalls verlassen Sie die Ereignisverarbeitungsfunktion und beenden Sie die Antwort.

<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>

Wenn eine Seite eine große Anzahl von Elementen enthält und jedes Element ein oder mehrere Ereignisse registriert, kann die Leistung beeinträchtigt werden. Beim Zugriff auf und beim Ändern aktualisierter DOM-Knoten ist das Programm langsamer; insbesondere wenn der Ereignisverbindungsprozess im Ladeereignis (oder DOMContentReady-Ereignis) stattfindet, ist dies eine arbeitsreiche Zeitspanne für jede umfangreiche interaktive Webseite. Darüber hinaus muss der Browser einen Datensatz jedes Ereignishandlers speichern, was ebenfalls mehr Speicher belegt.

【Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene】

Das obige ist der detaillierte Inhalt vonWas bedeutet die Delegation von Javascript-Ereignissen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!