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
Beispielcode zum Konfigurieren von Nginx zur Unterstützung von https
1. Einleitung Lassen Sie Ihre Website immer noch ...
So deinstallieren Sie IIS7-Web- und FTP-Dienste in Win7 vollständig
Nachdem ich gestern die PHP-Entwicklungsumgebung ...
Einfache Beispiele zum Erstellen gespeicherter Prozeduren, Trigger und zur Verwendung von Cursorn in Navicat (Bilder und Text)
1. Tabellen erstellen <br /> Erstellen Sie ...
Eine vollständige Liste häufig verwendeter gemeinsamer Codes für Webseiten (wichtig für das Front-End)
Code kopieren Der Code lautet wie folgt: 1. Sina ...
Ein QQ-Chatroom basierend auf vue.js
Inhaltsverzeichnis Einführung Nachfolgend sehen S...
Detaillierte Erklärung der 4 Möglichkeiten zum Importieren von CSS-Dateien: inline, inline, extern und importiert
CSS-Importmethode - Inline Durch das Style-Tag-At...
HTML-Hyperlinks im Detail erklärt
Hyperlink Hyperlinks sind die am häufigsten verwen...
Teilen Sie 8 MySQL-Fallstricke, die Sie erwähnen müssen
MySQL ist einfach zu installieren, schnell und ve...
Konfigurationslösung für die MySQL Dual-Master-Architektur (Master-Master)
In Unternehmen hat die hohe Verfügbarkeit von Dat...
Tutorial zur Installation von htop unter CentOS 8
Wenn Sie Ihr System interaktiv überwachen möchten...
js zur Realisierung der automatischen Sperrbildschirmfunktion
1. Anwendungsszenarien Es gibt eine solche Anford...
Beispielcode für CSS-Stacking und Z-Index
Kaskadierung und kaskadierende Ebenen HTML-Elemen...
Zusammenfassung der Zeilenumbruchprobleme bei Textbereichen in HTML
Kürzlich stieß ich auf das Problem, ob die Daten b...
Implementierung der Graustufenversion mit Nginx und Lua
Installieren Sie memcached yum install -y memcach...
Super ausführliches Tutorial zur Installation einer virtuellen VMware-Maschine unter Apple Mac OS
Inhaltsverzeichnis Zusammenfassen Manchmal müssen...