JavaScript Event Handling: Klicks und Benutzerinteraktionen meistern

Einführung

Willkommen zum JavaScript Event Handling Lab! Events sind Aktionen, die im Browser stattfinden, wie z. B. wenn ein Benutzer auf eine Schaltfläche klickt, die Maus bewegt oder eine Taste drückt. Event Handling ist der Prozess des Schreibens von Code, der auf diese Events reagiert und Ihre Webseiten interaktiv und dynamisch macht.

In diesem Lab lernen Sie die grundlegenden Methoden zur Behandlung von Events in JavaScript kennen. Wir beginnen mit dem einfachen onclick-Attribut in HTML und gehen dann zur leistungsfähigeren und flexibleren addEventListener-Methode über. Sie lernen auch, wie Sie das event-Objekt verwenden, um das Verhalten von Events zu steuern und Informationen über das Event zu erhalten.

Am Ende dieses Labs werden Sie in der Lage sein:

Event-Handler an HTML-Elemente anzuhängen.
Ihre JavaScript-Logik von Ihrer HTML-Struktur zu trennen.
Die Standardaktion des Browsers für ein Event zu verhindern.
Zu identifizieren, welches Element ein Event ausgelöst hat.

Legen wir los!

onclick-Attribut zu HTML-Element hinzufügen

In diesem Schritt lernen Sie die direkteste Methode zur Behandlung eines Events kennen: die Verwendung eines HTML-Event-Handler-Attributs. Das onclick-Attribut ermöglicht es Ihnen, ein Stück JavaScript-Code auszuführen, wenn ein Element angeklickt wird. Obwohl diese Methode einfach ist, ist es im Allgemeinen besser, Ihr HTML und JavaScript zu trennen, was wir in den nächsten Schritten behandeln werden.

Zuerst fügen wir unserem Button ein onclick-Attribut hinzu.

Suchen Sie im Dateiexplorer auf der linken Seite der WebIDE die Datei index.html und öffnen Sie sie.
Suchen Sie das <button>-Element.
Ändern Sie das Button-Tag so, dass es ein onclick-Attribut enthält, das einen Alert anzeigt.

Ihr geändertes <button>-Element sollte wie folgt aussehen:

<button id="myButton" onclick="alert('Button Clicked!')">Click Me</button>

Nachdem Sie den Code hinzugefügt haben, speichern Sie die Datei index.html.

Um Ihre Änderungen zu sehen, wechseln Sie zum Tab Web 8080 oben in der Benutzeroberfläche. Klicken Sie auf die Schaltfläche "Click Me", und Sie sollten einen Browser-Alert mit der Meldung "Button Clicked!" sehen.

addEventListener für Klick-Event verwenden

In diesem Schritt verwenden wir den modernen und empfohlenen Ansatz für die Event-Behandlung: die addEventListener-Methode. Diese Methode ermöglicht es Ihnen, einen Event-Handler an ein Element anzuhängen, ohne Ihren JavaScript-Code in Ihr HTML-Markup zu mischen. Diese Praxis ist als "unobtrusive JavaScript" bekannt und führt zu saubererem, besser wartbarem Code.

Zuerst bereinigen wir unser HTML, indem wir das onclick-Attribut entfernen, das wir im vorherigen Schritt hinzugefügt haben.

Öffnen Sie die Datei index.html.
Entfernen Sie das onclick-Attribut aus dem <button>-Element. Es sollte wieder wie folgt aussehen:

<button id="myButton">Click Me</button>

Nun fügen wir den Event-Listener mit JavaScript hinzu.

Öffnen Sie die Datei script.js im Dateiexplorer. Sie ist derzeit leer.
Fügen Sie den folgenden Code zu script.js hinzu:

const button = document.querySelector("#myButton");

button.addEventListener("click", () => {
  alert("Clicked with addEventListener!");
});

Lassen Sie uns diesen Code aufschlüsseln:

document.querySelector('#myButton'): Diese Zeile wählt das Button-Element aus dem DOM anhand seiner ID, myButton, aus.
addEventListener('click', ...): Diese Methode wird auf dem Button-Element aufgerufen. Sie nimmt zwei Hauptargumente entgegen:
- Das erste Argument ist der Event-Typ, auf den gehört werden soll, in diesem Fall 'click'.
- Das zweite Argument ist die "Handler"- oder "Listener"-Funktion, die ausgeführt wird, wenn das Event auftritt. Hier verwenden wir eine anonyme Pfeilfunktion () => { ... }.

Speichern Sie die Datei script.js und wechseln Sie zum Tab Web 8080. Klicken Sie auf die Schaltfläche, und Sie sollten nun einen Alert mit der Meldung "Clicked with addEventListener!" sehen.

Event-Handler-Funktion definieren

In diesem Schritt lernen Sie, wie Sie Ihren Code noch sauberer und wiederverwendbarer gestalten können, indem Sie eine benannte Funktion für Ihren Event-Handler definieren. Anstatt eine anonyme Funktion direkt in addEventListener zu verwenden, können Sie eine separate Funktion definieren und dann ihren Namen an den Listener übergeben.

Dieser Ansatz ist nützlich, wenn die Logik der Event-Behandlung komplex ist oder wenn Sie dieselbe Funktion für mehrere Events oder Elemente wiederverwenden möchten.

Lassen Sie uns unsere script.js-Datei ändern, um eine benannte Funktion zu verwenden.

Öffnen Sie die Datei script.js.
Ersetzen Sie den vorhandenen Code durch Folgendes:

const button = document.querySelector("#myButton");

function handleClick() {
  button.textContent = "I was clicked!";
}

button.addEventListener("click", handleClick);

Hier ist, was sich geändert hat:

Wir haben eine neue Funktion namens handleClick definiert. Diese Funktion enthält die Logik, die ausgeführt wird, wenn der Button geklickt wird – in diesem Fall ändert sie den Text des Buttons.
In addEventListener übergeben wir nun den Funktionsnamen handleClick als zweites Argument. Beachten Sie, dass wir die Funktionsreferenz selbst übergeben und sie nicht aufrufen (d. h. handleClick und nicht handleClick()). Der Browser ruft die Funktion für uns auf, wenn das Klick-Event auftritt.

Speichern Sie die Datei script.js und gehen Sie zum Tab Web 8080. Klicken Sie auf den Button. Diesmal sehen Sie anstelle eines Alerts, wie sich der Text des Buttons zu "I was clicked!" ändert.

Code-Snippet, das die Definition einer Event-Handler-Funktion zeigt

Standardaktion mit preventDefault verhindern

In diesem Schritt werden wir das event-Objekt und eine seiner nützlichsten Methoden untersuchen: preventDefault(). Wenn ein Event auftritt, übergibt der Browser automatisch ein event-Objekt an die Handler-Funktion. Dieses Objekt enthält Informationen über das Event und ermöglicht es Ihnen, dessen Verhalten zu steuern.

Einige HTML-Elemente haben eine Standardaktion. Beispielsweise ist die Standardaktion eines Links (Tag <a>) die Navigation zur URL, die in seinem href-Attribut angegeben ist. Die Methode event.preventDefault() ermöglicht es Ihnen, diese Standardaktion zu unterbinden.

Unsere index.html-Datei enthält bereits einen Link mit der ID myLink. Fügen wir ihm einen Event-Listener hinzu, um zu verhindern, dass er navigiert.

Öffnen Sie die Datei script.js.
Fügen Sie den folgenden Code am Ende der Datei hinzu:

const link = document.querySelector("#myLink");

function handleLinkClick(event) {
  console.log("Link-Klick erkannt, Navigation verhindert.");
  event.preventDefault();
}

link.addEventListener("click", handleLinkClick);

Analysieren wir den neuen Code:

Wir wählen das <a>-Element mit der ID myLink aus.
Wir definieren eine Handler-Funktion handleLinkClick, die einen Parameter akzeptiert, den wir event genannt haben. Dies wird das vom Browser bereitgestellte Event-Objekt sein.
Innerhalb der Funktion rufen wir event.preventDefault() auf, um den Browser daran zu hindern, dem Link zu folgen.
Wir fügen auch eine console.log-Nachricht hinzu, um zu bestätigen, dass unser Handler ausgeführt wird.

Speichern Sie die Datei script.js. Gehen Sie nun zum Tab Web 8080.

Klicken Sie mit der rechten Maustaste irgendwo auf die Seite und wählen Sie "Untersuchen" (Inspect), um die Entwicklertools des Browsers zu öffnen.
Wechseln Sie im Entwicklertools-Fenster zum Tab "Konsole" (Console).
Klicken Sie auf den Link "Visit LabEx (link will be disabled)".

Sie werden zwei Dinge bemerken: Die Seite navigiert nicht zu labex.io, und die Meldung "Link-Klick erkannt, Navigation verhindert." erscheint in der Konsole.

Konsolenausgabe, die zeigt, dass der Link-Klick verhindert wurde

Event-Ziel mit event.target abrufen

In diesem letzten Schritt lernen wir eine weitere wichtige Eigenschaft des event-Objekts kennen: event.target. Diese Eigenschaft gibt Ihnen eine Referenz auf das spezifische Element, das das Event ausgelöst hat. Dies ist unglaublich nützlich, insbesondere wenn Sie einen Event-Listener auf einem Elternelement haben, der Events für mehrere Kindelemente verwaltet (eine Technik namens Event Delegation).

Für dieses Lab verwenden wir event.target in einem einfacheren Kontext: um das direkt angeklickte Element zu modifizieren, ohne eine separate Variable dafür zu benötigen.

Lassen Sie uns die handleClick-Funktion für unseren Button ändern, um event.target zu verwenden.

Öffnen Sie die Datei script.js.
Suchen Sie die handleClick-Funktion, die Sie in Schritt 3 geschrieben haben, und ändern Sie sie so, dass sie den event-Parameter akzeptiert und event.target verwendet.

Ersetzen Sie die alte handleClick-Funktion durch diese neue Version:

function handleClick(event) {
  // event.target bezieht sich auf den angeklickten Button
  event.target.style.backgroundColor = "lightblue";
  event.target.textContent = "My color changed!";
}

Hier ist die Aufschlüsselung:

Die Funktion handleClick akzeptiert nun das event-Objekt als Parameter.
Anstatt die Variable button zu verwenden, verwenden wir nun event.target, um uns auf das angeklickte Element zu beziehen.
event.target.style.backgroundColor = 'lightblue' ändert die Hintergrundfarbe des angeklickten Elements.
event.target.textContent = 'My color changed!' ändert seinen Textinhalt.

Ihre vollständige Datei script.js sollte nun etwa so aussehen:

const button = document.querySelector("#myButton");

function handleClick(event) {
  // event.target refers to the button that was clicked
  event.target.style.backgroundColor = "lightblue";
  event.target.textContent = "My color changed!";
}

button.addEventListener("click", handleClick);

const link = document.querySelector("#myLink");

function handleLinkClick(event) {
  console.log("Link click detected, navigation prevented.");
  event.preventDefault();
}

link.addEventListener("click", handleLinkClick);

Speichern Sie die Datei und wechseln Sie zum Tab Web 8080. Klicken Sie auf den Button. Sie werden sehen, wie sich seine Hintergrundfarbe zu Hellblau ändert und sein Text zu "My color changed!" aktualisiert wird.

Änderung von Button-Hintergrund und Text nach dem Klick

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss des JavaScript Event Handling Labs! Sie haben erfolgreich die Kernkonzepte erlernt, um Webseiten interaktiv zu gestalten, indem Sie auf Benutzeraktionen reagieren.

In diesem Lab haben Sie Folgendes behandelt:

Das grundlegende onclick-Attribut für einfache Event-Behandlung direkt in HTML.
Die moderne und bevorzugte addEventListener-Methode zur Trennung von Belangen und zur sauberen Organisation Ihres JavaScript-Codes.
Wie man benannte Funktionen als Event-Handler definiert und verwendet, um eine bessere Code-Organisation und Wiederverwendbarkeit zu erzielen.
Das mächtige event-Objekt, mit event.preventDefault(), um Standard-Browserverhalten zu stoppen.
Wie man das Element identifiziert, das ein Event ausgelöst hat, mithilfe der event.target-Eigenschaft.

Diese Fähigkeiten sind grundlegend für die Front-End-Webentwicklung und bilden die Bausteine für die Erstellung reichhaltiger, dynamischer und benutzerfreundlicher Webanwendungen. Üben Sie diese Konzepte weiter, um sie zu meistern.