Die Ereignisbehandlung ist ein wichtiges Konzept in JavaScript. Ereignisse ermöglichen dynamische und interaktive HTML-Seiten, sodass Sie ansprechende Benutzeroberflächen erstellen können. Sie können Code schreiben, um JavaScript auszuführen, wenn ein Ereignis im DOM auftritt.
Ein Ereignis kann auftreten, wenn ein Benutzer auf ein HTML-Element klickt, die Seite geladen wird oder wenn sich der Wert eines Eingabefelds ändert. Sie können Code schreiben, der die HTML-Struktur ändert, wenn ein Ereignis eintritt. Lernen Sie drei verschiedene Möglichkeiten kennen, wie Sie Ereignis-Listener zu Ihrem Code hinzufügen können.
1. Die addEventListener-Methode
Die Methode addEventListener ist eine der beliebtesten Event-Listener-Methoden. Es hat drei Parameter:
- Ein Objekt, das das Ereignis darstellt.
- Eine Funktion, um damit umzugehen.
- Ein optionaler boolescher Wert, useCapture, der beschreibt, wie sich das Ereignis im gesamten DOM ausbreitet.
Das Ereignis kann ein beliebiges angegebenes DOM-Ereignis für ein Zielelement sein. Eine Funktion wird eingerichtet, um auf dieses Ereignis zu reagieren, wenn es auftritt.
Die Funktion kann anonym oder eine benannte Funktion sein. Beliebte Ziele sind ein Element, seine untergeordneten Elemente, ein Dokument und ein Fenster, das ein Ereignis unterstützt.
Der addEventListener() ist eine empfohlene Methode, um Ereignis-Listener in JavaScript zu verwalten. Es funktioniert mit jedem Ereignisziel, nicht nur mit HTML-Elementen, und unterstützt mehrere Ereignishandler.
Möglicherweise möchten Sie Code auf dem DOM ausführen. Sie können Text drucken, Berechnungen durchführen oder ein Bild anzeigen, wenn ein Benutzer auf die Schaltfläche klickt.
Lassen Sie uns mit dem folgenden Code veranschaulichen:
html>
<html>
<Körper>
<h1>Die addEventListener-Methode mit Funktionenh1>
<TasteAusweis="meinBtn">Klicken Sie hierTaste>
<PAusweis="Demo">P>
Körper>
html>Fügen Sie als Nächstes den Ereignis-Listener mit der Schaltfläche hinzu.
konst Element = dokumentieren.getElementById("meinBtn");
element.addEventListener("klicken", meineFunktion1);
FunktionmeineFunktion1() {
dokumentieren.getElementById("Demo").innerHTML += „Funktion ausgeführt! "
}
Wenn Sie auf die Schaltfläche klicken, wird der Text „Funktion ausgeführt“ auf dem Bildschirm gedruckt, wie unten gezeigt.
2. Ereignisse an addEventListener delegieren
Das Delegieren eines Ereignisses in JavaScript ist ein Muster, das verwendet wird, um mehrere Ereignisse zu verarbeiten. Anstatt jedem Element einen Ereignis-Listener hinzuzufügen, fügen Sie den Ereignis-Listener nur einem Vorgängerelement hinzu. Auf das Element, das das Ereignis ausgelöst hat, können Sie über zugreifen .Ziel Eigenschaft des Ereignisobjekts.
Dadurch wird sichergestellt, dass alle Elemente, auf die Sie abzielen, ein gemeinsames Verhalten aufweisen. Ohne sie müssten Sie jedem manuell einen Ereignis-Listener hinzufügen.
Hier ist ein Beispiel für die Delegierung von Ereignissen:
html>
<html>
<Körper>
<h1> Ereignisdelegierung auf Schaltflächenh1>
<div>
<Taste>Knopf 1Taste>
<Taste>Taste 2Taste>
<Taste>Taste 3Taste>
div>
Körper>
html>
Fügen Sie als Nächstes die Ereignis-Listener mit nur wenigen Codezeilen zu allen Schaltflächen hinzu.
konst div = dokumentieren.querySelector('div')div.addEventListener("klicken", (Ereignis) => {
Wenn (ereignis.ziel.tagName 'TASTE') {
Konsole.Protokoll('Schaltfläche angeklickt')
}
});
Die Ereignisdelegierung ist ein Muster, das auf Ereignisblasen basiert. Ereignisblasen treten auf, wenn ein Element ein Ereignis empfängt und es an seine übergeordneten und übergeordneten Elemente im DOM überträgt. Es ist ein Ereignisausbreitung Konzept, das standardmäßig in JavaScript vorkommt.
3. Verwenden des onclick-Attributs
Sie können das Attribut onclick verwenden, um JavaScript auszuführen, wenn Benutzer auf ein Element klicken. Wie die addEventListener-Methode können Sie die onclick-Methode verwenden, um Text zu drucken, Berechnungen durchzuführen und Elementfunktionen zu ändern der Dom.
Sie können den onclick-Event-Listener als Inline-Event-Handler zum HTML-Element hinzufügen. Das Ereignis tritt auf, wenn ein Benutzer auf das Element klickt. Ändern Sie die Farbe des folgenden Absatzes dynamisch mit der onclick-Methode:
html>
<html>
<Körper>
<h1> Führen Sie onClick-Ereignisse aush1>
<PAusweis="Demo"anklicken="meineFunktion()">
Klicken Sie mich an, um meine Textfarbe zu ändern.
P>
Körper>
html>Fügen Sie in der JavaScript-Datei den folgenden Code hinzu:
FunktionmeineFunktion() {
dokumentieren.getElementById("Demo").style.color = "Rot";
}Die Ausgabe wird wie gezeigt angezeigt:
Warum etwas über Ereignis-Listener erfahren?
Als JavaScript-Entwickler verwenden Sie häufig Ereignis-Listener in Projekten. Mit Ereignis-Listenern können Sie zahlreiche Funktionen erstellen, darunter Bubbling- und Erfassungsereignisse. Das Verständnis dieser Konzepte wird es Ihnen erleichtern, dynamische Schnittstellen für Ihre Anwendungen zu erstellen.
