TOC

Grundlegendes zu Ereignissen in JavaScript

Einführung

In der Reihe Understanding the DOM haben wir https://www.digitalocean.com/community/tutorials behandelt / verstehe-den-dom-baum-und-knoten [den DOM-baum] und wie man https://www.digitalocean.com/community/tutorials/ wie man-zugriffselemente-in-der-dom-zugriff erhält] , traverse, https://www.digitalocean.com/community/tutorials/how-to-make-changes- to-the-dom [hinzufügen und entfernen] und modify Knoten und Elemente, die die Developer Tools Console verwenden.

Obwohl wir jetzt fast jede gewünschte Änderung am DOM vornehmen können, ist dies aus Benutzersicht nicht sehr hilfreich, da wir Änderungen nur manuell ausgelöst haben. Wenn wir etwas über Ereignisse lernen, werden wir verstehen, wie man alles zusammenfügt, um interaktive Websites zu erstellen.

  • Ereignisse * sind Aktionen, die im Browser stattfinden und entweder vom Benutzer oder vom Browser selbst ausgelöst werden können. Im Folgenden finden Sie einige Beispiele für häufige Ereignisse, die auf einer Website auftreten können:

  • Die Seite wird vollständig geladen

  • Der Benutzer klickt auf eine Schaltfläche

  • Der Benutzer bewegt sich über einem Dropdown

  • Der Benutzer sendet ein Formular

  • Der Benutzer drückt eine Taste auf seiner Tastatur

Durch die Codierung von JavaScript-Antworten, die bei einem Ereignis ausgeführt werden, können Entwickler Benutzern Nachrichten anzeigen, Daten validieren, auf einen Tastenklick reagieren und viele andere Aktionen ausführen.

In diesem Artikel werden Ereignishandler, Ereignis-Listener und Ereignisobjekte behandelt. Wir gehen außerdem auf drei verschiedene Arten vor, um Code für die Verarbeitung von Ereignissen zu schreiben, und einige der häufigsten Ereignisse. Wenn Sie sich mit Ereignissen vertraut machen, können Sie Endbenutzern ein interaktiveres Web-Erlebnis bieten.

Event-Handler und Event-Listener

Wenn ein Benutzer auf eine Schaltfläche klickt oder eine Taste drückt, wird ein Ereignis ausgelöst. Diese Ereignisse werden als Klickereignis bzw. Tastendruckereignis bezeichnet.

Ein * Ereignishandler * ist eine JavaScript-Funktion, die ausgeführt wird, wenn ein Ereignis ausgelöst wird.

Ein * Ereignis-Listener * fügt einem Element eine reaktionsfähige Schnittstelle hinzu, über die das betreffende Element warten und abhören kann, bis das betreffende Ereignis ausgelöst wird.

Es gibt drei Möglichkeiten, um Elementen Ereignisse zuzuweisen:

  • Inline-Ereignishandler

  • Event-Handler-Eigenschaften

  • Event-Listener

Wir werden alle drei Methoden durchgehen, um sicherzustellen, dass Sie mit jeder Art der Auslösung eines Ereignisses vertraut sind, und dann die Vor- und Nachteile jeder Methode besprechen.

Attribute für Inline-Ereignishandler

Bevor wir uns mit Ereignishandlern befassen, betrachten wir zunächst den * Inline-Ereignishandler *. Beginnen wir mit einem sehr einfachen Beispiel, das aus einem "+ button " -Element und einem " p " -Element besteht. Wir möchten, dass der Benutzer auf die Schaltfläche "" klickt, um den Textinhalt des "+ p +" zu ändern.

Beginnen wir mit einer HTML-Seite mit einer Schaltfläche im Hauptteil. Wir verweisen auf eine JavaScript-Datei, der wir in Kürze Code hinzufügen.

events.html

<!DOCTYPE html>
<html lang="en-US">

<head>
   <title>Events</title>
</head>

<body>

 <!-- Add button -->
 <button>Click me</button>

 <p>Try to change me.</p>

</body>

<!-- Reference JavaScript file -->
<script src="js/events.js"></script>

</html>

Direkt auf der Schaltfläche "" fügen wir ein Attribut mit dem Namen " onclick" hinzu. Der Attributwert ist eine von uns erstellte Funktion mit dem Namen "+ changeText () +".

events.html

<!DOCTYPE html>
<html lang="en-US">

<head>
   <title>Events</title>
</head>

<body>

   <button onclick="changeText()">Click me</button>

   <p>Try to change me.</p>

</body>

<script src="js/events.js"></script>

</html>

Erstellen wir unsere Datei "+ events.js ", die wir hier im Verzeichnis " js / " abgelegt haben. Darin erstellen wir die Funktion ` changeText () `, mit der der ` textContent ` des Elements ` p +` geändert wird.

js / events.js

// Function to modify the text content of the paragraph
const changeText = () => {
   const p = document.querySelector('p');

   p.textContent = "I changed because of an inline event handler.";
}

Wenn Sie die "+ events.html +" zum ersten Mal laden, wird eine Seite angezeigt, die folgendermaßen aussieht:

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-1.png [Erstes Rendern von Events.html]

Wenn Sie oder ein anderer Benutzer jedoch auf die Schaltfläche klicken, ändert sich der Text des Tags "+ p " von " Versuch mich zu ändern. " In " Ich habe mich aufgrund eines Inline-Ereignishandlers geändert. +":

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-2.png

Inline-Ereignishandler sind eine einfache Möglichkeit, Ereignisse zu verstehen, sollten jedoch im Allgemeinen nicht über Test- und Schulungszwecke hinaus verwendet werden.

Sie können Inline-Ereignishandler mit Inline-CSS-Stilen für ein HTML-Element vergleichen. Es ist viel praktischer, ein separates Stylesheet mit Klassen zu verwalten, als Inline-Stile für jedes Element zu erstellen, genauso wie es praktischer ist, JavaScript zu verwalten, das vollständig über eine separate Skriptdatei verwaltet wird, als jedem Element Handler hinzuzufügen.

Eigenschaften der Ereignisbehandlungsroutine

Der nächste Schritt von einem Inline-Ereignishandler ist die Eigenschaft * Ereignishandler *. Dies funktioniert sehr ähnlich wie ein Inline-Handler, außer dass wir die Eigenschaft eines Elements in JavaScript anstelle des Attributs im HTML-Code festlegen.

Das Setup ist hier dasselbe, außer dass wir das + onclick =" changeText () "+ nicht mehr in das Markup einfügen:

events.html

...
<body>

   <button>Click me</button>

   <p>I will change.</p>

</body>
...

Unsere Funktion bleibt ebenfalls ähnlich, außer dass wir jetzt auf das "+ button" -Element im JavaScript zugreifen müssen. Wir können einfach auf "+ onclick " zugreifen, genauso wie wir auf " style " oder " id +" oder eine andere Elementeigenschaft zugreifen würden, und dann die Funktionsreferenz zuweisen.

js / events.js

// Function to modify the text content of the paragraph
const changeText = () => {
   const p = document.querySelector('p');

   p.textContent = "I changed because of an event handler property.";
}

// Add event handler as a property of the button element
const button = document.querySelector('button');
button.onclick = changeText;

Wenn Sie die Seite zum ersten Mal laden, zeigt der Browser Folgendes an:

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-3.png [Erstes Laden von events.html mit Ereignishandler]

Wenn Sie nun auf die Schaltfläche klicken, hat dies einen ähnlichen Effekt wie zuvor:

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-4.png [Antwort mit dem Ereignishandler von events.html]

Beachten Sie, dass wir beim Übergeben eines Funktionsverweises auf die Eigenschaft "+ onclick +" keine Klammern einfügen, da wir die Funktion in diesem Moment nicht aufrufen, sondern nur einen Verweis darauf übergeben.

Die Event-Handler-Eigenschaft ist etwas besser zu warten als die Inline-Handler, weist jedoch immer noch einige der gleichen Hürden auf. Wenn Sie beispielsweise versuchen, mehrere separate Eigenschaften ("+ onclick +") festzulegen, werden alle bis auf die letzte Eigenschaft überschrieben (siehe unten).

js / events.js

const p = document.querySelector('p');
const button = document.querySelector('button');

const changeText = () => {
   p.textContent = "Will I change?";
}

const alertText = () => {
   alert('Will I alert?');
}

// Events can be overwritten
button.onclick = changeText;
button.onclick = alertText;

Im obigen Beispiel wird durch Klicken auf die Schaltfläche "" nur eine Warnung angezeigt und der Text " p " nicht geändert, da der Code " alert () +" der letzte Code war, der der Eigenschaft hinzugefügt wurde.

image: https://assets.digitalocean.com/articles/eng_javascript/dom/events-5.png [Letzte Antwort über den Event-Handler von events.html]

Mit einem Verständnis der Inline-Event-Handler und der Event-Handler-Eigenschaften wenden wir uns den Event-Listenern zu.

Ereignis-Listener

Die neueste Ergänzung zu JavaScript-Ereignishandlern sind Ereignis-Listener. Ein * Ereignis-Listener * sucht nach einem Ereignis in einem Element. Anstatt das Ereignis direkt einer Eigenschaft des Elements zuzuweisen, verwenden wir die Methode + addEventListener () +, um auf das Ereignis zu warten.

+ addEventListener () + benötigt zwei obligatorische Parameter - das Ereignis, das abgehört werden soll, und die Listener-Rückruffunktion.

Der HTML-Code für unseren Ereignis-Listener ist derselbe wie im vorherigen Beispiel.

events.html

...
   <button>Click me</button>

   <p>I will change.</p>
...

Wir werden weiterhin die gleiche + changeText () + Funktion wie zuvor verwenden. Wir fügen der Schaltfläche die Methode "+ addEventListener () +" hinzu.

js / events.js

// Function to modify the text content of the paragraph
const changeText = () => {
   const p = document.querySelector('p');

   p.textContent = "I changed because of an event listener.";
}

// Listen for click event
const button = document.querySelector('button');
button.addEventListener('click', changeText);

Beachten Sie, dass bei den ersten beiden Methoden ein Klickereignis als "+ onclick " bezeichnet wurde, bei Ereignis-Listenern jedoch als " click ". Jeder Ereignis-Listener löscht das " an +" aus dem Wort. Im nächsten Abschnitt werden wir uns weitere Beispiele für andere Arten von Ereignissen ansehen.

Wenn Sie die Seite mit dem obigen JavaScript-Code neu laden, erhalten Sie die folgende Ausgabe:

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-6.png [Ereignislistener-Antwort von Ereignissen.html]

Auf den ersten Blick scheinen Ereignis-Listener den Eigenschaften von Ereignishandlern sehr ähnlich zu sein, bieten jedoch einige Vorteile. Wir können mehrere Ereignis-Listener für dasselbe Element festlegen, wie im folgenden Beispiel gezeigt.

js / events.js

const p = document.querySelector('p');
const button = document.querySelector('button');

const changeText = () => {
   p.textContent = "Will I change?";
}

const alertText = () => {
   alert('Will I alert?');
}

// Multiple listeners can be added to the same event and element
button.addEventListener('click', changeText);
button.addEventListener('click', alertText);

In diesem Beispiel werden beide Ereignisse ausgelöst, sodass der Benutzer eine Warnung und einen geänderten Text erhält, sobald er aus der Warnung heraus klickt.

Häufig werden anonyme Funktionen anstelle einer Funktionsreferenz für einen Ereignis-Listener verwendet. Anonyme Funktionen sind Funktionen, die nicht benannt sind.

// An anonymous function on an event listener
button.addEventListener('click', () => {
   p.textContent = "Will I change?";
});

Es ist auch möglich, die Funktion + removeEventListener () + zu verwenden, um ein oder alle Ereignisse aus einem Element zu entfernen.

// Remove alert function from button element
button.removeEventListener('click', alertText);

Außerdem können Sie "+ addEventListener () " für das " document" - und "+ window" -Objekt verwenden.

Ereignis-Listener sind derzeit die gebräuchlichste und bevorzugte Methode, Ereignisse in JavaScript zu verarbeiten.

Gemeinsame Ereignisse

Wir haben Informationen zu Inline-Ereignishandlern, Ereignishandlereigenschaften und Ereignis-Listenern mithilfe des click-Ereignisses erhalten, aber es gibt noch viele weitere Ereignisse in JavaScript. Im Folgenden werden einige der häufigsten Ereignisse beschrieben.

Mausereignisse

Mausereignisse gehören zu den am häufigsten verwendeten Ereignissen. Sie beziehen sich auf Ereignisse, bei denen mit der Maus auf Schaltflächen geklickt oder der Mauszeiger bewegt wird. Diese Ereignisse entsprechen auch der entsprechenden Aktion auf einem Touch-Gerät.

Event Description

click

Fires when the mouse is pressed and released on an element

dblclick

Fires when an element is clicked twice

mouseenter

Fires when a pointer enters an element

mouseleave

Fires when a pointer leaves an element

mousemove

Fires every time a pointer moves inside an element

Ein "+ click " ist ein zusammengesetztes Ereignis, das aus kombinierten " mousedown " - und " mouseup +" -Ereignissen besteht, die ausgelöst werden, wenn die Maustaste gedrückt bzw. gedrückt wird.

Die gleichzeitige Verwendung von + mouseenter + und + mouseleave + erzeugt einen Hover-Effekt, der so lange anhält, wie sich ein Mauszeiger auf dem Element befindet.

Formularereignisse

Formularereignisse sind Aktionen, die sich auf Formulare beziehen, z. B. "+ input +" - Elemente, die ausgewählt oder nicht ausgewählt sind, und Formulare, die gesendet werden.

Event Description

submit

Fires when a form is submitted

focus

Fires when an element (such as an input) receives focus

blur

Fires when an element loses focus

Focus wird erreicht, wenn ein Element ausgewählt wird, z. B. durch einen Mausklick oder durch Navigieren mit der Taste + TAB +.

JavaScript wird häufig verwendet, um Formulare einzureichen und die Werte an eine Backend-Sprache zu senden. Der Vorteil der Verwendung von JavaScript zum Senden von Formularen besteht darin, dass zum Senden des Formulars kein erneutes Laden der Seite erforderlich ist und JavaScript zum Überprüfen der erforderlichen Eingabefelder verwendet werden kann.

Tastaturereignisse

Tastaturereignisse werden für die Bearbeitung von Tastaturaktionen verwendet, z. B. das Drücken einer Taste, das Anheben einer Taste und das Gedrückthalten einer Taste.

Event Description

keydown

Fires once when a key is pressed

keyup

Fires once when a key is released

keypress

Fires continuously while a key is pressed

Obwohl sie ähnlich aussehen, greifen die Ereignisse + keydown + und + keypress + nicht auf alle genau gleichen Tasten zu. Während "+ keydown " jede gedrückte Taste bestätigt, werden bei " keypress " Tasten weggelassen, die kein Zeichen produzieren, wie " SHIFT ", " ALT " oder " DELETE +".

Tastaturereignisse haben bestimmte Eigenschaften für den Zugriff auf einzelne Tasten.

Wenn ein Parameter, der als "+ event " - Objekt bezeichnet wird, an den Ereignis-Listener übergeben wird, können wir auf weitere Informationen zu der durchgeführten Aktion zugreifen. Drei Eigenschaften, die sich auf Tastaturobjekte beziehen, umfassen " keyCode", "+ key" und "+ code".

Wenn der Benutzer beispielsweise den Buchstaben "+ a +" auf seiner Tastatur drückt, werden die folgenden Eigenschaften für diese Taste angezeigt:

Property Description Example

keyCode

A number pertaining to the key

65

key

Represents the character name

a

code

Represents the physical key being pressed

KeyA

Um zu zeigen, wie diese Informationen über die JavaScript-Konsole erfasst werden, können Sie die folgenden Codezeilen schreiben.

// Test the keyCode, key, and code properties
document.addEventListener('keydown', event => {
   console.log('key: ' + event.keyCode);
   console.log('key: ' + event.key);
   console.log('code: ' + event.code);
});

Sobald wir auf der Konsole "+ ENTER " drücken, können wir jetzt eine Taste auf der Tastatur drücken. In diesem Beispiel drücken wir " a +".

OutputkeyCode: 65
key: a
code: KeyA

Die Eigenschaft + keyCode + ist eine Zahl, die sich auf die gedrückte Taste bezieht. Die Eigenschaft "+ key " ist der Name des Zeichens, der geändert werden kann. Wenn Sie beispielsweise " a " mit " SHIFT " drücken, wird " key " von " A " angezeigt. Die Eigenschaft " code +" repräsentiert die physische Taste auf der Tastatur.

Weitere Informationen finden Sie unter complete list of events im Mozilla Developer Network.

Ereignisobjekte

Das Objekt "+ Event " besteht aus Eigenschaften und Methoden, auf die alle Ereignisse zugreifen können. Zusätzlich zum generischen Objekt " Event " verfügt jeder Ereignistyp über eigene Erweiterungen, wie z. B. " KeyboardEvent" und "+ MouseEvent".

Das Objekt "+ Event " wird als Parameter über eine Listener-Funktion übergeben. Es wird normalerweise als " event " oder " e " geschrieben. Wir können auf die Eigenschaft " code " des Ereignisses " keydown +" zugreifen, um die Tastatursteuerung eines PC-Spiels zu replizieren.

Erstellen Sie zum Ausprobieren eine einfache HTML-Datei mit den Tags "+ <p> +" und laden Sie sie in einen Browser.

event-test-p.html

<!DOCTYPE html>
<html lang="en-US">
<head>
   <title>Events</title>
</head>
<body>

 <p></p>

</body>
</html>

Geben Sie dann den folgenden JavaScript-Code in die Developer Console Ihres Browsers ein.

// Pass an event through to a listener
document.addEventListener('keydown', event => {
   var element = document.querySelector('p');

   // Set variables for keydown codes
   var a = 'KeyA';
   var s = 'KeyS';
   var d = 'KeyD';
   var w = 'KeyW';

   // Set a direction for each code
   switch (event.code) {
       case a:
           element.textContent = 'Left';
           break;
       case s:
           element.textContent = 'Down';
           break;
       case d:
           element.textContent = 'Right';
           break;
       case w:
           element.textContent = 'Up';
           break;
   }
});

Wenn Sie eine der Tasten drücken - "+ a ", " s ", " d " oder " w +" -, wird eine Ausgabe ähnlich der folgenden angezeigt:

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/events-7.png [Beispiel für ein erstes Ereignisobjekt]

Von hier aus können Sie weiterentwickeln, wie der Browser reagiert und wie der Benutzer diese Tasten drückt, und eine dynamischere Website erstellen.

Als Nächstes gehen wir auf eine der am häufigsten verwendeten Ereigniseigenschaften ein: die Eigenschaft "+ target". Im folgenden Beispiel haben wir drei "+ div" -Elemente in einem "+" - Abschnitt.

event-test-div.html

<!DOCTYPE html>
<html lang="en-US">
<head>
   <title>Events</title>
</head>
<body>

 <section>
   <div id="one">One</div>
   <div id="two">Two</div>
   <div id="three">Three</div>
 </section>

</body>
</html>

Mit "+ event.target " und JavaScript in der Entwicklerkonsole unseres Browsers können wir einen Ereignis-Listener auf dem äußeren " section +" - Element platzieren und das am tiefsten verschachtelte Element abrufen.

const section = document.querySelector('section');

// Print the selected target
section.addEventListener('click', event => {
   console.log(event.target);
});

Wenn Sie auf eines dieser Elemente klicken, wird die Ausgabe des entsprechenden Elements mit + event.target + an die Konsole zurückgegeben. Dies ist äußerst nützlich, da Sie nur einen Ereignis-Listener platzieren können, der für den Zugriff auf viele verschachtelte Elemente verwendet werden kann.

image: https://assets.digitalocean.com/articles/eng_javascript/dom/events-8.png [Beispiel für ein zweites Ereignisobjekt]

Mit dem Objekt "+ Event +" können wir Antworten für alle Ereignisse einrichten, einschließlich generischer Ereignisse und spezifischerer Erweiterungen.

Fazit

Ereignisse sind Aktionen, die auf einer Website ausgeführt werden, z. B. Klicken, Bewegen, Senden eines Formulars, Laden einer Seite oder Drücken einer Taste auf der Tastatur. JavaScript wird wirklich interaktiv und dynamisch, wenn Websites auf Aktionen reagieren, die der Benutzer ausgeführt hat.

In diesem Tutorial haben wir gelernt, was Ereignisse sind, Beispiele für häufige Ereignisse, den Unterschied zwischen Ereignishandlern und Ereignis-Listenern und wie auf das Objekt "+ Event +" zugegriffen wird. Mit diesem Wissen können Sie dynamische Websites und Anwendungen erstellen.

Related