jQuery- Ereignismethoden

jQuery ist maßgeschneidert, um auf Ereignisse in einer HTML-Seite zu reagieren.

Was sind Ereignisse?

Alle verschiedenen Besucheraktionen, auf die eine Webseite reagieren kann, werden als Ereignisse bezeichnet.

Ein Ereignis stellt den genauen Moment dar, in dem etwas passiert.

Beispiele:

Bewegen einer Maus über ein Element
Auswählen eines Optionsfelds
Klicken Sie auf ein Element

Der Begriff „Feuer/gefeuert“ wird häufig bei Veranstaltungen verwendet. Beispiel: "Das Tastendruck-Ereignis wird ausgelöst, sobald Sie eine Taste drücken".

Hier sind einige allgemeine DOM-Ereignisse:

Mouse Events	Keyboard Events	Form Events	Document/Window Events
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 äquivalente jQuery-Methode.

Um allen Absätzen auf einer Seite ein Klickereignis zuzuweisen, können Sie Folgendes tun:

$("p").click();

Der nächste Schritt besteht darin, zu definieren, was passieren soll, wenn das Ereignis ausgelöst wird. Sie müssen dem Ereignis eine Funktion übergeben:

$("p").click(function(){
// action goes here!!
});

Häufig verwendete jQuery-Ereignismethoden

$(Dokument).bereit()

Die $(document).ready()Methode ermöglicht es uns, eine Funktion auszuführen, wenn das Dokument vollständig geladen ist. Dieses Ereignis wird bereits im Kapitel jQuery-Syntax erklärt.

klicken()

Die click()Methode hängt eine Event-Handler-Funktion an ein HTML-Element an.

Die Funktion wird ausgeführt, wenn der Benutzer auf das HTML-Element klickt.

Das folgende Beispiel sagt: Wenn ein Klickereignis auf einem <p>Element ausgelöst wird; aktuelles <p>Element ausblenden:

Beispiel

$("p").click(function(){
$(this).hide();
});

dblclick()

Die dblclick()Methode hängt eine Event-Handler-Funktion an ein HTML-Element an.

Die Funktion wird ausgeführt, wenn der Benutzer auf das HTML-Element doppelklickt:

Beispiel

$("p").dblclick(function(){
$(this).hide();
});

Mauseingabe ()

Die mouseenter()Methode hängt eine Event-Handler-Funktion an ein HTML-Element an.

Die Funktion wird ausgeführt, wenn der Mauszeiger in das HTML-Element eintritt:

Beispiel

$("#p1").mouseenter(function(){
alert("You entered p1!");
});

Maus verlassen ()

Die mouseleave()Methode hängt eine Event-Handler-Funktion an ein HTML-Element an.

Die Funktion wird ausgeführt, wenn der Mauszeiger das HTML-Element verlässt:

Beispiel

$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});

Maus nach unten()

Die mousedown()Methode hängt eine Event-Handler-Funktion an ein HTML-Element an.

Die Funktion wird ausgeführt, wenn die linke, mittlere oder rechte Maustaste gedrückt wird, während sich die Maus über dem HTML-Element befindet:

Beispiel

$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});

Maus hoch ()

Die mouseup()Methode hängt eine Event-Handler-Funktion an ein HTML-Element an.

Die Funktion wird ausgeführt, wenn die linke, mittlere oder rechte Maustaste losgelassen wird, während sich die Maus über dem HTML-Element befindet:

Beispiel

$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

schweben()

Die hover()Methode übernimmt zwei Funktionen und ist eine Kombination der Methoden mouseenter()und .mouseleave()

Die erste Funktion wird ausgeführt, wenn die Maus in das HTML-Element eintritt, und die zweite Funktion wird ausgeführt, wenn die Maus das HTML-Element verlässt:

Beispiel

$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

Fokus()

Die focus()Methode hängt eine Event-Handler-Funktion an ein HTML-Formularfeld an.

Die Funktion wird ausgeführt, wenn das Formularfeld den Fokus erhält:

Beispiel

$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});

verwischen()

Die blur()Methode hängt eine Event-Handler-Funktion an ein HTML-Formularfeld an.

Die Funktion wird ausgeführt, wenn das Formularfeld den Fokus verliert:

Beispiel

$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});

Die on() Methode

Die on()Methode hängt einen oder mehrere Ereignishandler für die ausgewählten Elemente an.

Hängen Sie ein Click-Event an ein <p>Element an:

Beispiel

$("p").on("click", function(){
$(this).hide();
});

Hängen Sie mehrere Event-Handler an ein <p>Element an:

Beispiel

$("p").on({
mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

jQuery-Übungen