JS Einfache Events

Inhaltsverzeichnis

Erste Schritte: JS Einfache Events: onClick, onChange

JavaScript ermöglicht es dir, auf Benutzeraktionen zu reagieren, indem du sogenannte Events
(einfach: Ereignisse) abfängst und verarbeitest. In diesem Tutorial lernst du, wie du mit den einfachen
Events onClick und onChange interaktive Funktionen in deine Webseite einbauen kannst.

Was sind Events?

Ein Event ist ein Ereignis, das im Browser stattfindet, z. B. ein Klick auf einen Button,
das Ändern eines Eingabefeldes oder das Bewegen der Maus. Durch das Abhören (Event-Handling) dieser
Ereignisse kannst du dynamisch auf Nutzerinteraktionen reagieren.

onClick Event

Das onClick-Event wird ausgelöst, wenn ein Benutzer auf ein Element klickt.
Es eignet sich hervorragend, um Buttons, Links oder andere interaktive Elemente
anzusteuern.

Beispiel 1: Inline onClick

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>onClick Beispiel</title>
</head>
<body>
    <button onclick="alert('Button wurde geklickt!')">Klick mich!</button>
</body>
</html>

In diesem Beispiel wird bei einem Klick auf den Button eine einfache Alert-Box angezeigt.

Beispiel 2: Event Listener via JavaScript

Statt das Event direkt im HTML zu definieren, kannst du es auch über JavaScript zuweisen. Dies
hält den HTML-Code sauberer und trennt die Logik von der Struktur.

// HTML Teil (index.html)
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>onClick via JavaScript</title>
</head>
<body>
    <button id="myButton">Klick mich!</button>
    <script src="script.js"></script>
</body>
</html>

// JavaScript Teil (script.js)
let myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
    alert("Button wurde über addEventListener geklickt!");
});

Hier wird das click-Event an das Element mit der ID myButton gebunden.
Wenn der Button geklickt wird, löst der Event Listener die Funktion aus, die eine Alert-Box anzeigt.

onChange Event

Das onChange-Event wird verwendet, um Änderungen in Formularfeldern zu erkennen.
Es tritt auf, wenn der Wert eines Elements geändert und der Fokus (z. B. durch Klicken auf ein anderes Element)
verlassen wird. Dies ist besonders nützlich bei Dropdown-Menüs, Textfeldern oder Checkboxen.

Beispiel: onChange in einem Eingabefeld

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>onChange Beispiel</title>
    <script>
        function handleInputChange(element) {
            alert("Neuer Wert: " + element.value);
        }
    </script>
</head>
<body>
    <label for="username">Benutzername:</label>
    <input type="text" id="username" name="username" onChange="handleInputChange(this)">
</body>
</html>

Wenn der Nutzer den Inhalt des Textfelds ändert und danach den Fokus (z. B. durch Klicken außerhalb)
verlässt, wird die Funktion handleInputChange aufgerufen und zeigt den neuen Wert in einer Alert-Box an.

Tipps für die Nutzung von Events

Saubere Trennung: Es ist oft besser, Events über JavaScript-Event Listener zu binden
anstatt Inline-Events im HTML zu nutzen. So bleibt der Code übersichtlicher.
Mehrfache Events: Du kannst mehreren Elementen oder demselben Element verschiedene Events
zuweisen, z. B. sowohl onClick als auch onMouseOver.
Event Delegation: Besonders bei vielen dynamisch erzeugten Elementen hilft es, das Event
an ein übergeordnetes Element zu binden und so die Leistung zu optimieren.
Browser-Kompatibilität: Moderne Browser unterstützen die meisten Standard-Events.
Falls du ältere Browser unterstützen musst, informiere dich über entsprechende Polyfills.

Fazit

Mit einfachen Events wie onClick und onChange kannst du interaktive
Elemente und Formularfunktionen in deine Website integrieren. Diese grundlegenden Techniken
sind der erste Schritt, um deinen Nutzern ein dynamisches und reaktionsfähiges Erlebnis zu bieten.
Wenn du diese Konzepte beherrscht, steht dem Ausbau deiner JavaScript-Fähigkeiten nichts mehr im Wege.