Detaillierte Einführung in die JavaScript-Ereignisdelegierung (mit Code)

Dieser Artikel bietet Ihnen eine detaillierte Einführung in die JavaScript-Ereignisdelegation (mit Code). Freunde in Not können darauf verweisen.

Die Ereignisdelegation (auch als Ereignis-Proxy bezeichnet) verwendet Ereignis-Bubbling, um alle Ereignisse eines bestimmten Typs zu verwalten, indem nur ein Ereignis-Handler angegeben wird.

Es gibt ein sehr anschauliches Beispiel für die „Expresszustellung“ der Ereignisdelegation im Internet. Hier werde ich einige Änderungen und Erweiterungen daran vornehmen und dann das Programm verwenden, um den Mechanismus der Ereignisdelegation zu veranschaulichen.

Es gibt drei Mitarbeiter in einem Unternehmen, und ihre Express-Lieferadresse ist das Unternehmen. Wenn eine Expresslieferung zugestellt wird, ruft der Kurier ihre Nummer an, um sie zu benachrichtigen, und sie holen das Paket ab, nachdem sie es erhalten haben Anruf.

员工ID	员工名称	联系方式
A	甲	111111
B	乙	222222
C	丙	333333

entspricht der Seite, das heißt, jeder Mitarbeiter ist ein Zeichen:

<ul id="前台工作人员">
    <li id="A">员工甲</li>
    <li id="B">员工乙</li>
    <li id="C">员工丙</li>
</ul>

Das Verhalten jedes Mitarbeiters, der ans Telefon geht, um den Kurier abzuholen, ist ein Ereignis. Hier gehen wir davon aus, dass das Verhalten beim Abholen Der Kurier entspricht dem Onclick-Ereignis:

A.onclik = function() {
    收取快递；
};
B.onclick = function() {
    收取快递；
};
C.onclick = function() {
    收取快递；
};

Die obige Implementierung umfasst normalerweise das Durchlaufen jedes Mitarbeiters und das Hinzufügen von Ereignissen zu ihm:

/*程序1*/
var aUl = document.getElemengtByID("前台工作人员");
var aLi = aUl.getElemengtsByTagName("li");
for (var i = 0; i < aLi.length; i++) {
    aLi[i].onclick = function() {
        收取快递;
    }
}

Wie Sie sehen können, wird durch das Festlegen eines Ereignisses für jeden Mitarbeiter ein Ereignis generiert Da der Code redundant ist und Speicher belegt, werden mehrere DOM-Vorgänge (Interaktion mit DOM-Knoten) gleichzeitig ausgeführt, was sich auf die Leistung der Seite auswirkt.

„Die Reduzierung des DOM-Betriebs ist eine der Hauptideen der Leistungsoptimierung“

Also dachten wir natürlich: Warum kann das Personal an der Rezeption nicht für die Expresszustellung für uns unterschreiben?

<ul id="前台工作人员">
    <li id="A">员工甲</li>
    <li id="B">员工乙</li>
    <li id="C">员工丙</li>
</ul>

/*程序2*/
var tel = document.getElementById("前台工作人员");
tel.onclick = function() {
    收取快递;
}

Angenommen, der Kurier ruft zu diesem Zeitpunkt an, um Mitarbeiter A zu benachrichtigen, das Paket abzuholen (onclick), aber der DOM-Knoten

von Mitarbeiter A hat kein entsprechendes Ereignis ( onclick), sodass dieses Ereignis zum übergeordneten Element

„blubbert“ und festgestellt wird, dass
ein Verarbeitungsereignis onclick hat Das Ereignis wird ausgelöst und die Front-End-Mitarbeiter erhalten eine Expresslieferung.

Wie Sie sehen, wird auf diese Weise nicht nur die Codemenge reduziert, sondern auch die Anzahl der Interaktionen mit DOM-Knoten.

Es gibt noch einen weiteren Vorteil: Beim Hinzufügen eines neuen DOM-Knotens wird der Ereigniseffekt des übergeordneten Elements automatisch übernommen. Mit anderen Worten: Wenn ein neuer Mitarbeiter Ding in das Unternehmen kommt, hilft ihm das Personal an der Rezeption direkt beim Abholen der Expresslieferung, ohne dass eine spezielle Veranstaltung für ihn organisiert werden muss.

Wenn zum Beispiel ein neuer Mitarbeiter Ding zum Unternehmen kommt:

...
<input type="button" id="btn" value="添加新员工">
...

...
/*程序3*/
var aBtn = document.getElementById("btn");
aBtn.onclick = function() {
    var aLi = document.createElement("li");
    oLi.innerHTML = "员工丁";
    aUl.appendChild(aLi);
}
...

In einem Programm, das keine Ereignisdelegation verwendet, gibt es kein Ereignis für den neu hinzugefügten Mitarbeiter Ding. Wir müssen Verwenden Sie eine Funktion, um es einzudämmen. Programm 1:

/*程序4*/
function pro1() {
    var aUl = document.getElemengtByID("前台工作人员");
    var aLi = aUl.getElemengtsByTagName("li");
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].onclick = function() {
            收取快递;
        }
    }
}

Führen Sie dann am Ende des Programms diese Funktion aus, die den neuen Mitarbeiter D hinzufügt:

/*程序5*/
var aBtn = document.getElementById("btn");
aBtn.onclick = function() {
    ...
    pro1();
}

Der Nachteil liegt auf der Hand: die Anzahl der Die Interaktionen zwischen DOM-Knoten nehmen exponentiell zu.
Wenn wir den Ereignisdelegierungsmechanismus verwenden, um dies zu implementieren, besteht dieses Problem nicht. Das Onclick-Ereignis des untergeordneten Elementknotens wird direkt auf dem übergeordneten Elementknoten ausgeführt.

An diesem Punkt werden wir denken: Für die gleiche Art von Ereignis ist es sehr praktisch, die Ereignisdelegation zu verwenden, um es auf dem übergeordneten Elementknoten zu platzieren. Wenn Sie jedoch unterschiedliche Ereignisse für verschiedene untergeordnete Elementknoten ausführen möchten, können Sie dann trotzdem die Ereignisdelegierung verwenden?

Die Antwort ist ja.

Zum Beispiel verwenden die oben genannten drei Mitarbeiter des Unternehmens immer feste Marken für die Expresszustellung:

• Mitarbeiter A nutzt gerne STO Express, weil es günstig ist und STO nur in den Park liefert Gate;
• Mitarbeiter B ist JD.com-Mitglied und kauft immer selbst betriebene Produkte von JD.com, und JD.com liefert sie per Expresslieferung nach unten;
• Mitarbeiter C ist ein SF Express VIP und SF Express liefern sie in die Lobby der Etage, in der sie sich befinden.

Nachdem die drei den Anruf erhalten hatten, mussten die Mitarbeiter an der Rezeption zu verschiedenen Orten gehen, um die Artikel abzuholen. Für Programme, die keine Ereignisdelegation verwenden, müssen eindeutige Verarbeitungsereignisse festgelegt werden für jede Person:

var A = document.getElementById("A");
var B = document.getElementById("B");
var C = document.getElementById("C");

A.onclick = function() {
    去园区大门取快递；
}
B.onclick = function() {
    去楼下取快递；
}
C.onclick = function() {
    去本层大厅取快递；
}

erfordert mindestens drei DOM-Operationen und Ereignisfunktionen werden für jeden entsprechenden Knoten festgelegt.

Und wenn die Ereignisdelegation verwendet wird:

var aUl = document.getElemengtByID("前台工作人员");
aUl.onclick = function (ev) {
    var target = ev || window.event; /*兼容浏览器*/
    var target = ev.target || ev.srcElement; /*兼容浏览器*/
    if (target.nodeName.toLocaleLowerCase() == "li") {
        switch(target.id) {
            case "A" :
                去园区大门取快递;
                break;
            case "B" :
                去楼下取快递;
                break;
            case "C" :
                去本层大厅取快递;
                break;
        }
    }
}

Auf diese Weise gibt es nur eine DOM-Operation und andere Operationen werden in JS ausgeführt, was die Leistung der Webseite effektiv verbessern kann.

Das Obige ist die Grundidee der JS-Ereignisdelegation. Kurz gesagt, die Funktion des Ereignis-Bubblings wird verwendet, um Ereignisse zu verwalten, redundanten Code zu reduzieren, unnötige Erstellungen zu reduzieren und interaktive Vorgänge zu reduzieren, um Speicher zu sparen und die Leistung zu verbessern.

Ereignis-Bubbling

Ereignis-Bubbling ist, wenn ein DOM-Elementknoten ausgelöst wird. Wenn der Knoten kein entsprechendes Ereignis hat, prüfen Sie, ob sein übergeordnetes Element ein entsprechendes Ereignis hat. Wenn nicht, prüfen Sie weiter nach oben. Entsprechend ist die Ereigniserfassung

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die JavaScript-Ereignisdelegierung (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!