Hauptinhalt
Programmierung
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.
Willst du an der Diskussion teilnehmen?
Noch keine Beiträge.