Detaillierte Erklärung der JS-Ereignisdelegation
|
1. Jede Funktion ist ein Objekt und belegt Speicher. Je mehr Objekte im Speicher sind, desto schlechter ist die Leistung. Die Lösung für das Problem zu umfangreicher Ereignisbehandlung ist die Ereignisdelegation. 2. Event-Delegation-Bubbling: Durch die Angabe nur eines Event-Handlers können Sie alle Events eines bestimmten Typs verwalten. Beispiele
<ul id="meineLinks">
<li id="myLi1">text1</li>
<li id="myLi2">text2</li>
<li id="myLi3">text3</li>
</ul>Das Ereignisobjekt in Browsern unter IE9 wird im globalen window.event platziert; Kompatibilität lösen: event = event || window.event Ereignisdelegierung (d. h. Binden von Ereignissen an übergeordnete/ältere Objekte und Steuern von Änderungen an untergeordneten Objekten über das Zielattribut des Ereignisobjekts): event.target (Zielobjekt angeklickt)
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Stil>
td{
Breite: 100px;
Höhe: 100px;
Rand: 2px durchgehend rot;
}
</Stil>
</Kopf>
<Text>
<Tabelle>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</Tabelle>
</body>
<Skript>
var tab = document.getElementsByTagName("Tabelle")[0];
tab.onclick = Funktion (Ereignis) {
//Klicken Sie auf das untergeordnete Objekt, um die Farbe zu ändern event.target.style.backgroundColor = "black";
}
</Skript>
</html>Dies ist das Ende dieses Artikels mit der ausführlichen Erklärung der JS-Ereignisdelegation. Weitere Informationen zum Verständnis der JS-Ereignisdelegation 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! Das könnte Sie auch interessieren:
|
<<: HTML+CSS+JavaScript realisiert die Anzeige des ausgewählten Effekts nach der Mausbewegung
>>: Beispiel für die Migration einer MySQL-Online-Protokollbibliothek
Artikel empfehlen
JavaScript imitiert den vollständigen Seitenimplementierungsprozess der offiziellen Website von Xiaomi Mall
Inhaltsverzeichnis 1. Homepage-Erstellung 1. Prod...
OpenSSL-Zertifikate in der Linux-Umgebung generieren
1. Umgebung: CentOS7, Openssl1.1.1k. 2. Konzept: ...
Mehr als 100 Zeilen Code zur Implementierung von React Drag Hooks
Vorwort Der Quellcode umfasst insgesamt nur mehr ...
JavaScript zum Erreichen eines einfachen Message Board-Falls
Verwenden Sie Javascript, um ein Message Board-Be...
html ein Link-Tag Titel Attribut Zeilenumbruch Mouseover Prompt Inhalt Zeilenumbruch Effekt
Die Methode zum Umbrechen des Inhalts (Titelattrib...
Installationsanleitung für MySQL 5.7.19 unter Windows 10 So ändern Sie das Root-Passwort von MySQL, nachdem Sie es vergessen haben
Nehmen Sie als Beispiel die Installation von MySQ...
So führen Sie in MySQL eine Abfrage-Zwischenspeicherung durch und beheben Fehler
Wir alle wissen, dass wir die Eigenschaften der P...
Einführung in die Verwendung des Select-Optgroup-Tags in HTML
Gelegentlich muss ich ausgewählte Inhalte gruppier...
Was ist DNS-Prefetch? Frontend-Optimierung: DNS-Vorauflösung verbessert die Seitengeschwindigkeit
Inhaltsverzeichnis Hintergrund 1. Was ist DNS-Pre...
CSS3-Filter (Filter) zum Erreichen des Beispielcodes für den Grau- oder Schwarzmodus einer Webseite
Frontend css3.filter kann nicht nur den Graueffek...
Zusammenfassung häufig verwendeter MySQL-Befehle im Linux-Betriebssystem
Hier sind einige gängige MySQL-Befehle für Sie: -...
Implementierung eines Element-Eingabefelds, das automatisch den Fokus erhält
Beim Erstellen eines Formulars in einem aktuellen...
Erläuterung der Methode zum Schreiben von SQL-Anweisungen zum Einfügen
Methode 1: INSERT INTO t1(Feld1,Feld2) VALUE(v001...
Analyse von Context-Anwendungsszenarien in React
Kontextdefinition und Zweck Der Kontext bietet ei...
Einige Parameterbeschreibungen von Texteingabefeldern im Webdesign
<br />In Gästebüchern, Foren und anderen Ort...