Viele Webanwendungen sind auf irgendeine Form von Ereignis angewiesen, um ihre Funktionen auszuführen. Irgendwann interagiert ein Mensch mit seiner Schnittstelle, was ein Ereignis generiert. Diese vom Menschen gesteuerten Ereignisse basieren normalerweise auf einem Peripheriegerät wie einer Maus oder einer Tastatur.

Wenn ein Gerät ein Ereignis erstellt, kann das Programm darauf warten, um zu wissen, wann ein bestimmtes Verhalten ausgeführt werden muss. In diesem Tutorial erfahren Sie, wie Sie mit JavaScript auf Ereignisse warten.

Was ist ereignisgesteuerte Programmierung?

Ereignisgesteuerte Programmierung ist der Name eines Paradigmas, das auf der Ausführung eines Ereignisses beruht, um seine Funktionen auszuführen. Es ist möglich, ein ereignisgesteuertes Programm in jeder höheren Programmiersprache zu erstellen. Ereignisgesteuerte Programmierung wird jedoch am häufigsten in Sprachen wie JavaScript verwendet, die sich in eine Benutzeroberfläche integrieren.

Was ist ein Ereignis-Listener?

Ein Ereignis-Listener ist eine Funktion, die einen vordefinierten Prozess initiiert, wenn ein bestimmtes Ereignis eintritt. Ein Ereignis-Listener „hört“ also auf eine Aktion und ruft dann eine Funktion auf, die eine zugehörige Aufgabe ausführt. Dieses Ereignis kann eine von vielen Formen annehmen. Häufige Beispiele sind Mausereignisse, Tastaturereignisse und Fensterereignisse.

Erstellen eines Ereignis-Listeners mit JavaScript

Sie können auf jedem nach Ereignissen lauschen Element im DOM. JavaScript hat ein addEventListener() Funktion, die Sie für jedes Element einer Webseite aufrufen können. Der addEventListener() Funktion ist eine Methode der EventTarget Schnittstelle. Alle Objekte, die Ereignisse unterstützen, implementieren diese Schnittstelle. Dazu gehören das Fenster, das Dokument und einzelne Elemente auf der Seite.

Die Funktion addEventListener() hat folgenden Grundaufbau:

element.addEventListener("Ereignis", functionToExecute);

Wo:

• das Element kann jedes HTML-Tag darstellen (von einer Schaltfläche bis zu einem Absatz)
• das "Veranstaltung" ist eine Zeichenfolge, die eine bestimmte, erkannte Aktion benennt
• das functionToExecute ist ein Verweis auf eine vorhandene Funktion

Lassen Sie uns die folgende Webseite mit einigen HTML-Elementen erstellen:

Herzlich willkommen


 Hallo, willkommen auf meiner Website.


Lern mehr





Benutzerinformation

Nutzername: 

einreichen

Der obige HTML-Code erstellt eine einfache Seite, die auf eine JavaScript-Datei namens. verweist app.js. Der app.js Datei enthält den Code zum Einrichten der Ereignis-Listener. Wenn Sie also einen bestimmten Prozess einleiten möchten, wenn ein Benutzer auf die erste Schaltfläche auf der Webseite klickt, ist dies die Datei, in der er erstellt wird.

Die app.js-Datei

document.querySelector('.btn').addEventListener("click", clickDemo)
Funktion clickDemo(){
 console.log("Hallo")
}

Der obige JavaScript-Code greift auf die erste Schaltfläche auf der Seite mit dem. zu querySelector() Funktion. Es fügt diesem Element dann einen Ereignis-Listener hinzu, indem es die addEventListener() Methode. Das spezifische Ereignis, auf das es lauscht, hat den Namen „click“. Wenn die Schaltfläche dieses Ereignis auslöst, ruft der Listener die clickDemo() Funktion.

Verwandt: Erfahren Sie, wie Sie DOM-Selektoren verwenden

Der clickDemo() Funktion druckt „Hallo“ an die Browser-Konsole. Jedes Mal, wenn Sie auf die Schaltfläche klicken, sollten Sie diese Ausgabe in Ihrer Konsole sehen.

Die „Klick“-Ereignisausgabe

Was sind Mausereignisse?

JavaScript hat ein MausEvent Schnittstelle, die Ereignisse darstellt, die aufgrund der Interaktion eines Benutzers mit seiner Maus auftreten. Mehrere Veranstaltungen verwenden die MausEvent Schnittstelle. Zu diesen Veranstaltungen gehören die folgenden:

• klicken
• dblclick
• Mausbewegung
• Mouseover
• Mouseout
• Maus hoch
• Maus nach unten

Der klicken Ereignis tritt ein, wenn ein Benutzer eine Maustaste drückt und wieder loslässt, während sich der Mauszeiger über einem Element befindet. Genau das ist im vorherigen Beispiel passiert. Wie Sie der obigen Liste entnehmen können, können Mausereignisse viele Formen annehmen.

Ein weiteres häufiges Mausereignis ist dblclick, was für Doppelklick steht. Dies wird ausgelöst, wenn ein Benutzer zweimal schnell hintereinander auf eine Maustaste klickt. Eine bemerkenswerte Sache an der addEventListener() Die Funktion besteht darin, dass Sie damit einem einzelnen Element mehrere Ereignis-Listener zuweisen können.

Hinzufügen eines dblclick-Ereignisses zur ersten Schaltfläche

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
Funktion dblclickDemo(){
 alert("Dies ist eine Demonstration zum Erstellen eines Doppelklickereignisses")
}

Durch Hinzufügen des obigen Codes zur Datei app.js wird effektiv ein zweiter Ereignis-Listener für die erste Schaltfläche auf der Webseite erstellt. Wenn Sie also zweimal auf die erste Schaltfläche klicken, wird im Browser die folgende Warnung erstellt:

In der Abbildung oben sehen Sie die generierte Warnung und Sie sehen auch, dass sich zwei weitere „Hi there“-Ausgaben in der Konsole befinden. Dies liegt daran, dass ein Doppelklick-Ereignis eine Kombination aus zwei Klick-Ereignissen ist und es Ereignis-Listener für beide gibt klicken und das dblclick Veranstaltungen.

Die Namen der anderen Mausereignisse in der Liste beschreiben ihr Verhalten. Der Mausbewegung Ereignis tritt jedes Mal auf, wenn ein Benutzer seine Maus bewegt, wenn sich der Cursor über einem Element befindet. Der Maus hoch -Ereignis tritt ein, wenn ein Benutzer eine Schaltfläche über einem Element gedrückt hält und sie dann wieder loslässt.

Was sind Tastaturereignisse?

JavaScript hat ein TastaturEvent Schnittstelle. Dies hört auf Interaktionen zwischen einem Benutzer und seiner Tastatur. In der Vergangenheit, TastaturEvent hatte drei Ereignistypen. JavaScript hat jedoch seitdem die Tastendruck Veranstaltung.

Also, die keyup und Taste nach unten Events sind die einzigen zwei empfohlenen Tastatur-Events, die alles sind, was Sie brauchen. Der Taste nach unten Ereignis tritt ein, wenn ein Benutzer eine Taste drückt und die keyup Ereignis tritt ein, wenn ein Benutzer es freigibt.

Betrachten wir das obige HTML-Beispiel noch einmal. Der beste Ort, um einen Tastaturereignis-Listener hinzuzufügen, ist auf der Seite Eingang Element.

Hinzufügen eines Tastaturereignis-Listeners zur app.js-Datei

let Greetings = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
Funktion CaptureInput (e){
 Greetings.innerText = (`Hallo ${e.target.value}, willkommen auf meiner Website.`)
}

Der obige Code verwendet die querySelector() Funktion zum Aufrufen des Absatzes und Eingang Elemente auf der Seite. Es ruft dann die addEventListener() Methode auf der Eingang Element, das auf die lauscht keyup Veranstaltung. Wann immer a keyup Ereignis eintritt, das captureInput() Die Funktion nimmt den Schlüsselwert und fügt ihn dem Absatz auf der Seite hinzu. Der e Parameter stellt das Ereignis dar, das JavaScript automatisch zuweist. Dieses Ereignisobjekt hat eine Eigenschaft, target, die eine Referenz auf das Element ist, mit dem der Benutzer interagiert hat.

In diesem Beispiel ist das Etikett an der Eingang Feld fordert einen Benutzernamen an. Wenn Sie Ihren Namen in das Eingabefeld eingeben, sieht die Webseite ungefähr so ​​aus:

Der Absatz enthält nun den Eingabewert, der im obigen Beispiel „Jane Doe“ ist.

addEventListener erfasst alle Arten von Benutzerinteraktionen

In diesem Artikel haben Sie die addEventListener() -Methode sowie mehrere Maus- und Tastaturereignisse, die Sie damit verwenden können. An dieser Stelle wissen Sie, wie Sie auf ein bestimmtes Ereignis warten und eine Funktion erstellen, die darauf reagiert.

Der addEventListener bietet jedoch über seinen dritten Parameter zusätzliche Fähigkeiten. Sie können es verwenden, um die Ereignisausbreitung zu steuern: die Reihenfolge, in der Ereignisse von Elementen zu ihren Eltern oder Kindern verschoben werden.

Grundlegendes zur Ereignisausbreitung in JavaScript

Ereignisse sind eine leistungsstarke JavaScript-Funktion. Zu verstehen, wie ein Webbrowser sie mit Elementen abgleicht, ist der Schlüssel zur Beherrschung ihrer Verwendung.

Weiter lesen

Über den Autor