JavaScript Events und Event-Handler verstehen und einsetzen
geprüft am 7 September 2026 · 2 Min.
Events sind Aktionen, die der Nutzer auslösen kann: der Klick auf einen Button, die Texteingabe in einem Formular und so weiter. In JavaScript führst du mit Event-Handlern Code als Antwort auf diese Events aus.
Häufige Events in JavaScript
Es gibt zahlreiche Events, die in JavaScript regelmäßig zum Einsatz kommen. Ein paar Beispiele:
- click: wird ausgelöst, wenn der Nutzer auf ein Element klickt
- mouseover: wird ausgelöst, wenn der Nutzer mit der Maus über ein Element fährt
- submit: wird ausgelöst, wenn der Nutzer ein Formular abschickt
- focus: wird ausgelöst, wenn der Nutzer ein Element fokussiert (etwa mit einem Klick in ein Formularfeld)
Bei der Interaktion mit dem Nutzer werden noch viele weitere Events ausgelöst, etwa „change“, „keyup“, „keydown“ und so weiter. Eine vollständigere Liste der Events findest du hier: https://www.gekkode.com/developpement/comprendre-et-travailler-avec-les-evenements-en-javascript/
Einen Event-Handler an ein Element hängen
Es gibt mehrere Wege, einen Event-Handler an ein DOM-Element zu hängen. Der erste führt über die Eigenschaft des betreffenden Elements. Zum Beispiel, um einem Button einen Klick-Handler zu geben:
const button = document.querySelector('button');
button.onclick = function() {
console.log('Bouton cliqué');
}Ebenso lässt sich die Methode addEventListener verwenden, mit der ein Element mehrere Event-Handler bekommen kann:
const input = document.querySelector('input');
input.addEventListener('focus', function() {
console.log('Input focus');
});
input.addEventListener('blur', function() {
console.log('Input blur');
});Mit der Methode removeEventListener entfernst du einen Event-Handler wieder von einem Element:
// unsere anonyme Funktion
const maFonctionAnonyme = function() {
console.log("Le bouton a été cliqué");
}
// Wir fügen unser Event hinzu
document.getElementById('monBouton')
.addEventListener('click', maFonctionAnonyme);
// Später im Code entfernen wir dieses Event aus dem einen oder anderen Grund
document.getElementById('monBouton')
.removeEventListener('click', maFonctionAnonyme);Beachten Sie, dass die als Parameter übergebene Funktion genau dieselbe Instanz sein muss wie die dem Element hinzugefügte. Eine direkt an addEventListener übergebene anonyme Funktion lässt sich daher später nicht entfernen: Bewahren Sie eine Referenz in einer Variablen auf, wie oben.
In diesem Beispiel wird der Event-Handler „click“ mit der Funktion „maFonctionAnonyme“ vom Button entfernt.
Fazit
Mit Ereignissen und Ereignis-Handlern erzeugen Sie Echtzeit-Interaktionen auf Ihrer Website und machen sie dynamischer und angenehmer für die Nutzer. Das nächste Kapitel stellt Module und Import/Export (ES6) vor, mit denen der Code auf Dateien verteilt wird, die Klassen werden im Artikel über Klassen in JavaScript beschrieben.