Grundlagen von Events

Events sind Aktionen im Browser, auf die dein JavaScript reagieren kann – zum Beispiel ein Klick, das Absenden eines Formulars oder das Drücken einer Taste. Mit Event Listenern verbindest du HTML-Elemente mit JavaScript-Funktionen.

Was ist ein Event?

Ein Event ist ein Ereignis, das im Browser passiert. Typische Beispiele sind click, submit, input oder keydown.

Du kannst auf diese Ereignisse reagieren und dann JavaScript ausführen – zum Beispiel eine Meldung anzeigen, Inhalte ändern oder Formulardaten auslesen.

addEventListener

Die modernste und empfohlene Methode ist addEventListener(). Damit sagst du dem Browser: „Wenn dieses Event auftritt, führe diese Funktion aus.“

1<button id="meinButton">Klick mich</button>

1const button = document.getElementById("meinButton");
2
3button.addEventListener("click", function() {
4    console.log("Button wurde geklickt!");
5});

Event Listener mit Arrow Function

Statt einer normalen Funktion kannst du auch eine Arrow Function verwenden. Das ist besonders praktisch für kurze Aktionen.

1button.addEventListener("click", () => {
2    console.log("Button wurde geklickt!");
3});

EventHandler

Die Funktion, die auf ein Event reagiert, nennt man Event Handler. Sie wird ausgeführt, sobald das Event eintritt – zum Beispiel wenn der Nutzer auf den Button klickt.

1function handleClick() {
2    console.log("Button wurde geklickt!");
3}
4
5button.addEventListener("click", handleClick);

Parameter an Event-Funktionen übergeben

Manchmal brauchst du zusätzliche Werte in deiner Funktion. Dann rufst du die Funktion innerhalb des Listeners auf und übergibst die Parameter selbst.

1function begruesse(name) {
2    console.log("Hallo, " + name + "!");
3}
4
5button.addEventListener("click", () => {
6    begruesse("Anna");
7});

Mehrere Event Listener verwenden

Du kannst auf demselben Element mehrere Listener für dasselbe Event registrieren. Der Browser führt sie nacheinander aus.

1button.addEventListener("click", function() {
2    console.log("Erster Listener");
3});
4
5button.addEventListener("click", function() {
6    console.log("Zweiter Listener");
7});

onclick als Alternative

Alternativ kannst du die Eigenschaft onclick direkt am Element setzen. Das funktioniert, ist aber weniger flexibel als addEventListener().

1const button = document.getElementById("meinButton");
2
3button.onclick = function() {
4    console.log("Button wurde geklickt!");
5};

Events direkt im HTML

Events lassen sich auch direkt im HTML setzen, zum Beispiel mit onclick="...". Das ist schnell zum Testen, aber in größeren Projekten solltest du Events lieber in JavaScript binden.

1<button onclick="alert('Button wurde geklickt!')">
2    Klick mich
3</button>

Merksatz: Für sauberen Code trennst du HTML und JavaScript und nutzt addEventListener().