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

Wiederholung: DOM-Event in jQuery

Einen Event-Listener hinzufügen

Du kannst mit der Methode on() einen Eventlistener hinzufügen:
    $("#save-button").on("click", function() {
       // handle click event
    });
Wenn du Details zum Event wissen willst, findest du diese im jQuery Eventobjekt, welches der Callbackfunktion übergeben wird:
    $("#face-pic").on("click", function(event) {
       var mouseX = event.pageX;
       var mouseY = event.pageY;
    });

Events auslösen

Aus deinem JavaScript Code kannst du Events auch manuell auslösen:
$("#save-button").trigger("click");
Das kann hilfreich sein, wenn du neue Funktionen testen möchtest, oder wenn du Code ausführen möchtest, wenn die Seite geladen wird und auch nach einem bestimmten Ereignis.

Die DOM Bereitschaft überprüfen

Du musst sicherstellen, dass der Browser deinen JS-Code nicht ausführt, bevor DOM komplett geladen und bereit ist. Dazu kannst du deinen Code in der Funktion ready() hinzufügen:
    $(document).ready(function() {
      $("h1").text("Y'all ready for this?");
    });
Eine einfachere Version davon ist es, deinen Code der jQuery-Funktion zu übergeben:
    $(function() {
      $("h1").text("Y'all ready for this?");
    });
Diese Code ist aber nicht so gut verständlich wie die längere Version, daher empfehlen wir dir, die Funktion ready() zu verwenden.
Beachte, wenn du deinen JS-Code in einem <script>-Tag am Schluss der Webseite einfügst, dann sollte die DOM beim Zeitpunkt, wann dein Code ausgeführt wird, schon komplett geladen sein. Aber wenn du wirklich sichergehen willst, dann überprüfe die Bereitschaft der DOM trotzdem.

Mehr Event-Techniken

Wenn du eine detailliertere Beschreibung möchtest, um tiefer in die Events von jQuery einzutauchen, empfehlen wir dir den Artikel jQuery Event Basics aus der Dokumentation von jQuery zu lesen.