If you're seeing this message, it means we're having trouble loading external resources on our website.

Wenn du hinter einem Webfilter bist, stelle sicher, dass die Domänen *. kastatic.org und *. kasandbox.org nicht blockiert sind.

Hauptinhalt

Zusammenfassung: DOM-Ereignisse

Event-Listener hinzufügen

Um sicherzustellen, dass ein Webbrowser bei einem Ereignis auf einem Element eine bestimmte Funktion auffruft, must du document.addEventListener verwenden:
var buttonEl = document.getElementById("clicker");
var onButtonClick = function() {
    console.log("Oh mein Gott, du hast mich angeklickt!");
};
buttonEl.addEventListener("click", onButtonClick);
Wie du im Artikel über Event-Arten siehst, kannst du viele gültige Strings als ersten Parameter übergeben.
Wenn du Information über den Event benötigst, kannst du das Event-Objekt welches der Webbrowser der callback-Funktion übergibt verwenden:
var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
    console.log("Du hast bei " + e.clientX + " , " + e.clientY + " geklickt.");
};
faceEl.addEventListener("click", onFaceClick);
Das Event-Objekt hat viele verschiedene Eigenschaften. Hier findest du eine komplette Liste.
Wenn du das Klick-Verhalten für einen Link oder Formular-Submit überschreibst, solltest du eventuell event.preventDefault() aufrufen, um das Standardverhalten des Browsers zu blockieren.

Event-Listener entfernen

Wenn du einen bestimmten Event-Listener nicht mehr brauchst, kannst du ihn mit removeEventListener entfernen:
var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
    console.log("Du hast bei " + e.clientX + " , " + e.clientY + " geklickt.");
};
faceEl.addEventListener("click", onFaceClick);
// später ...
faceEl.removeEventListener("click", onFaceClick);

Willst du an der Diskussion teilnehmen?

Noch keine Beiträge.
Verstehst du Englisch? Klick hier, um weitere Diskussionen auf der englischen Khan Academy Seite zu sehen.