JavaScript fügt Ereignis-Listener zur Ereignisdelegierung in Batches hinzu. Detaillierter Prozess

1. Was ist Eventdelegation?

Ereignisdelegierung: Nutzen Sie die Eigenschaften des Ereignis-Bubblings, um die Verarbeitungsereignisse, die bei den untergeordneten Elementen registriert werden sollen, beim übergeordneten Element zu registrieren. Auf diese Weise wird, wenn auf das untergeordnete Element geklickt wird und festgestellt wird, dass es kein entsprechendes Ereignis für sich selbst gibt, nach dem übergeordneten Element gesucht und darauf reagiert. Dies hat folgende Vorteile:

• Reduzieren Sie DOM-Operationen und verbessern Sie die Leistung.
• Unterelemente können jederzeit hinzugefügt werden und die hinzugefügten Unterelemente verfügen automatisch über entsprechende Verarbeitungsereignisse.

2. Das Prinzip der Eventdelegation

Die Ereignisdelegation wird mithilfe des Event-Bubbling-Prinzips implementiert. Was ist Event-Bubbling? Das heißt, das Ereignis beginnt am tiefsten Knoten und breitet sich dann Schritt für Schritt nach oben aus.
Beispiel: Auf der Seite gibt es einen Knotenbaum, div>ul>li>a; wenn beispielsweise ein Klickereignis zum innersten a hinzugefügt wird, wird dieses Ereignis Schicht für Schicht nach außen ausgeführt, und die Ausführungsreihenfolge ist a>li>ul>div. Es gibt einen solchen Mechanismus, wenn wir also ein Klickereignis zum äußersten div hinzufügen, dann werden, wenn ul, li und a im Inneren ein Klickereignis auslösen, sie zum äußersten div weitergeleitet, sodass sie alle ausgelöst werden. Dies ist Ereignisdelegierung, bei der ihre Eltern beauftragt werden, Ereignisse in ihrem Namen auszuführen.

3. Durchführung der Eventdelegation

Implementieren Sie die Ereignisdelegation über einen Fall.
Fall: Ereignis-Listener stapelweise hinzufügen. Verwenden Sie JavaScript, um Folgendes zu erreichen: Klicken Sie auf das jeweilige Li-Element, und der Hintergrund des jeweiligen Li-Elements wird rot.

Strukturebene + Stilebenencode:

<Stil>
    * {
        Rand: 0;
        Polsterung: 0;
    }
    ul {
        schweben: links;
        Breite: 800px;
        Rand oben: 50px;
    }
    ul li {
        Listenstil: keiner;
        schweben: links;
        Breite: 200px;
        Höhe: 200px;
        Rand: 1px durchgezogen #000;
        Rand rechts: 20px;
    }
    ul li:erstes-Kind {
        Rand links: 20px;
    }
</Stil>
<Text>
	<ul id="Liste">
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
	</ul>
</body>

3.1 Methode 1: Schleife zum Hinzufügen von Ereignissen

Verwenden Sie keine Ereignisdelegierung. Verwenden Sie eine For-Schleife, um Klickereignisse hinzuzufügen. Der Speicherverbrauch ist groß.

var oList = document.getElementById('Liste');
var lis = oList.getElementsByTagName('li');
für (var i = 0; i < lis.length; i++) {
    lis[i].onclick = Funktion () {
        dieser.Stil.Hintergrundfarbe = "rot";
    }
}

3.2 Methode 2: Verwenden der Ereignisdelegierung

Verwenden Sie die Ereignisdelegierung.

var oList = document.getElementById('Liste');
oList.onclick = Funktion (e) {
	e.target.style.backgroundColor = "rot";
}

In diesem Fall stellt e.target das Element dar, auf das der Benutzer tatsächlich geklickt hat.

Damit ist dieser Artikel über den detaillierten Prozess des Hinzufügens von Ereignislistenern zur Ereignisdelegierung in Batches mithilfe von JavaScript abgeschlossen. Weitere relevante Inhalte zur Ereignisdelegierung in JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!