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
Beispiel für die Verwendung von UserMap in IMG
usemap ist ein Attribut des <img>-Tags, das ...
Das WeChat-Applet zeichnet die Bewegungsbahn des Benutzers auf
Inhaltsverzeichnis Konfiguration hinzufügen JSON-...
Lösungen für Probleme bei der Verwendung von addRoutes in Vue-Projekten
Inhaltsverzeichnis Vorwort 1. 404 Seite 1. Ursach...
CSS3 implementiert den Beispielcode der NES-Spielekonsole
Ergebnisse erzielenImplementierungscode html <...
Implementierung der kollaborativen Nutzung von React-Komponenten
Inhaltsverzeichnis Verschachtelung Kommunikation ...
Docker-Installationsmethode und detaillierte Erläuterung der vier Netzwerkmodi von Docker
1. Docker installieren yum -y install docker-io D...
Diskussion über Stilanpassung und Browserkompatibilitätsprobleme bei der Verwendung des Eingabeelements [type="file"]
Ich bin vor zwei Tagen beim Bearbeiten der schrift...
Linux-Betrieb und -Wartung – Tutorial zur grundlegenden Datenträgerverwaltung
1. Festplattenpartition: 2. fdisk-Partition Wenn ...
So leiten Sie eine URL mit Nginx Rewrite um
Ich muss in letzter Zeit bei der Arbeit oft die N...
Detaillierte Erklärung von JavaScript Promise und Async/Await
Inhaltsverzeichnis Überblick Vier Beispiele Beisp...
Kann die wiederholbare Leseebene von MySQL Phantomlesevorgänge lösen?
Einführung Als ich mehr über die Datenbanktheorie...
Drei gängige Methoden, um HTML-Seiten nach 3 Sekunden automatisch zu springen
In der Praxis stoßen wir häufig auf ein Problem: ...
Zusammenfassung der verschiedenen Haltungen der MySQL-Berechtigungseskalation
Inhaltsverzeichnis 1. Schreiben Sie Webshell in d...
Verwenden Sie die Triggermethode, um ein Popup-Dialogfeld zur Dateiauswahl zu realisieren, ohne auf die Dateitypeingabe klicken zu müssen
Sie können die Trigger-Methode verwenden. In JavaS...
CSS erzielt den Effekt der Vermischung zweier Elemente (Sticky-Effekt)
Ich erinnere mich, dass es vor ein paar Jahren in...