jQuery ist maßgeschneidert auf die Ereignisse in einer HTML-Seite zu reagieren.
Was sind Ereignisse?
All die verschiedenen Besucher Aktionen, die eine Web-Seite reagieren zu werden Ereignisse genannt.
Ein Ereignis stellt den genauen Zeitpunkt, wenn etwas passiert.
Beispiele:
- Bewegen einer Maus über ein Element
- Auswählen eines Radiobutton
- Klick auf ein Element
Der Begriff "fires/fired" wird oft mit Veranstaltungen genutzt. Beispiel: "Das keypress Ereignis ausgelöst wird, sobald Sie eine Taste drücken".
Hier sind einige gemeinsame DOM-Ereignisse:
| Mausereignisse | Tastatur-Events | Formularereignisse | Dokument / Fensterereignisse |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
jQuery Syntax für Ereignismethoden
In jQuery, haben die meisten DOM-Ereignisse eine gleichwertige jQuery-Methode.
ein Click-Ereignis auf alle Absätze auf einer Seite zuordnen, können Sie dies tun:
$("p").click();
Der nächste Schritt ist zu definieren, was, wenn das Ereignis ausgelöst wird passieren sollte. Sie müssen eine Funktion auf das Ereignis übergeben:
$("p").click(function(){
// action goes here!!
});
Häufig jQuery Event-Methoden, die
$(document).ready()
Die $(document).ready() Methode ermöglicht es uns , eine Funktion auszuführen , wenn das Dokument vollständig geladen ist. Dieses Ereignis wird bereits erklärt in der jQuery Syntax Kapitel.
click()
Der click() Methode legt einen Event - Handler - Funktion an einem HTML - Element.
Die Funktion wird ausgeführt, wenn der Benutzer auf die HTML-Element klickt.
Das folgende Beispiel sagt: Wenn ein Klick - Ereignis ausgelöst wird auf einem <p> Element; die aktuelle verbergen <p> Element:
dblclick()
Die dblclick() Methode legt einen Event - Handler - Funktion an einem HTML - Element.
Die Funktion wird ausgeführt, wenn der Benutzer einen Doppelklick auf das HTML-Element:
mouseenter()
Die mouseenter() Methode legt einen Event - Handler - Funktion an einem HTML - Element.
Die Funktion wird ausgeführt, wenn der Mauszeiger das HTML-Element eintritt:
mouseleave()
Die mouseleave() Methode legt einen Event - Handler - Funktion an einem HTML - Element.
Die Funktion wird ausgeführt, wenn der Mauszeiger das HTML-Element lässt:
mousedown()
Die mousedown() Methode legt einen Event - Handler - Funktion an einem HTML - Element.
Die Funktion wird ausgeführt, wenn die linke, mittlere oder rechte Maustaste gedrückt wird, während die Maus über das HTML-Element ist:
mouseup()
Die mouseup() Methode legt einen Event - Handler - Funktion an einem HTML - Element.
Die Funktion wird ausgeführt, wenn der linke, mittlere oder rechte Maustaste losgelassen wird, während sich die Maus über das HTML-Element ist:
hover()
Der hover() Methode hat zwei Funktionen und ist eine Kombination aus dem mouseenter() und mouseleave() Methoden.
Die erste Funktion ausgeführt wird, wenn die Maus das HTML-Element eintritt, und die zweite Funktion ausgeführt wird, wenn die Maus das HTML-Element lässt:
Beispiel
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
Versuch es selber " focus()
Der focus() Methode legt in ein HTML - Formularfeld ein Event - Handler - Funktion.
Die Funktion wird ausgeführt, wenn das Formularfeld den Fokus erhält:
Beispiel
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
Versuch es selber " blur()
Die blur() Methode legt in ein HTML - Formularfeld ein Event - Handler - Funktion.
Die Funktion wird ausgeführt, wenn das Formularfeld den Fokus verliert:
Beispiel
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
Versuch es selber " Die on() Methode
Die on() Methode legt einen oder mehrere Event - Handler für die ausgewählten Elemente.
Bringen Sie ein Klick - Ereignis zu einem <p> Element:
Bringen Sie mehrere Event-Handler zu einem <p> -Element:
Beispiel
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color",
"yellow");
}
}); Versuch es selber " Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 »
jQuery Event-Methoden
Für eine vollständige Ereignisreferenz jQuery, gehen Sie bitte auf unsere Veranstaltungen Referenz jQuery .