Events
In diesem Abschnitt beschäftigen wir uns mit der Behandlung von Ereignissen.Einführend soll ein Überblick zu den unterschiedlichen Implementierung gegeben werden:
- DOM Level 0 Event Modell http://en.wikipedia.org/wiki/DOM_events#DOM_Level_0
- DOM Level 2 Event Modell http://en.wikipedia.org/wiki/DOM_events#DOM_Level_2
- Internet Explorer Event Modell http://en.wikipedia.org/wiki/DOM_events#Microsoft-specific_model
jQuery Event Modell
- einheitliche Methoden für das Registrieren von Eventhandlern
- verschiedene Eventhandlern gleichen Typs auf ein Element registrierbar
- standardisierte Namen für Eventtypen
bind(eventtyp, [data,] listener)
Registriert eine Eventhandler-Funktion für den übergebenen Eventtyp auf dem ausgewählten Set von Elementen.Beispiel: Registriere 2 Eventhandler vom Typ
click auf dem ersten Bild < img> und gibt für jede listener -Funktionen einen Text auf dem Element mit der ID output aus.
$("img:first").bind("click", function(event) {
$("#output").append("ein Klick (Handler 1), ");
}).bind("click", function(event) {
$("#output").append("ein Klick (Handler 2)<br/>");
});
eventtypname(listener)
Alternativ zur bind() -Methode sind die Eventtypen auch direkt als Methoden verfügbar.
Damit verkürzt sich die Schreibweise für das Registrieren von Events.Beispiel: Registriere einen Eventhandler vom Type
click auf dem ersten Bild < img> und öffne als Aktion eine Alertbox.
$("img:first").click(function() {
alert("Ein Klick!");
});
blur |
focus |
mousedown |
resize |
change |
keydown |
mousemove |
scroll |
click |
keypress |
mouseout |
select |
dblclick |
keyup |
mouseover |
submit |
error |
load |
mouseup |
unload |
unbind(eventtyp, [listner])
Deregistriere die Eventhandler-Funktion für den übergebenen Eventtyp auf dem ausgewählten Set von Elementen.Beispiel: Deregistriere alle Eventhandler vom Typ
click auf dem ersten Bild < img>.
$("img:first").unbind("click");
Das Deregistrieren einzelner Eventhandler vom gleichen Typ ist nur dann möglich, wenn die
listener -Funktion als Top-Level-Funktion definiert wurde.
Inline-Funktionen wie im bind() -Beispiel können nicht einzel deregistriert werden.
one(eventtyp, [date,] listener)
Registriert einen Eventhandler vom angegeben Type. Nach einmaligem Auslösen
des Events wird der Eventhandler automatisch deregistriert.
trigger(eventtyp)
Löst das auf dem ausgewählten Set von Elementen registrierte Event aus.
Voraussetzung dafür ist, dass Event mit dem übergebenen Typ auf dem
ausgewählten Elementset existiert.Beispiel: Auf dem Bild mit der ID
scholle wird ein click -Event
registriert, welches als Aktion das wechseln der Klasse red_border ausführt.
Auf dem Bild mit der ID wels wird ein click -Event registriert, welches
ein click -Event auf dem Bild mit der ID scholle auslöst.
$("img#scholle").click(function() {
$(this).toggleClass("red_border");
});
$("img#wels").click(function() {
$("img#scholle").trigger("click")
});
Trigger werden häufig auf Eventhandler-Funktionen (als Kette) angewandt, um das erstmalige Auslösen des Events nach Laden der Seite auszulösen.
toggle(listenerOdd, listenerEven)
deprecated, removed in jQuery 1.9
Die Methode toggle() registriert ein click -Event auf dem ausgewählten
Elementeset und führt bei jedem Auftreten des Events wechselweise die
listenerOdd oder listenerEven -Funktion aus.hover(listenerOver, listenerOut)
Die Methode hover() arbeitet ähnlich zu toggle(). Dabei werden für die
Eventtypen mouseover und mouseout listener -Funktionen registriert.Beispiel: Hebe Tabellenzellen hervor, welche sich unter dem Mousezeiger befinden.
$("th, td").hover(function() {
$(this).addClass("yellow_bg");
}, function() {
$(this).removeClass("yellow_bg");
});
Ausbreitung von Events und deren Beeinflussung
Events, beispielsweise einclick auf einen Link breiten sich im
DOM-Baum von den Blättern (im Beispiel der Link <a>) über die
Elternelemente bis zur Wurzel (<html> -Element) aus.
Prüfen wir das mit folgendem Test nach:
$("*").click(function() {
$("#output").append("Event: " + $(this).prop('tagName') + "<br/>");
});
Das Ausbreiten von Events wird auch als event bubbling bezeichnet.
Beeinflussung
Die Ausbreitung sowie die Ausführung von Standardaktionen, wie beispielsweise das Folgen eines Links kann über denreturn -Code der listener -Funktion
gesteuert werden.
$("*").click(function() {
$("#output").append("Event: " + $(this).prop('tagName') + "<br/>");
});
$("a, input:checkbox").click(function() {
$(this).addClass("yellow_bg");
return false;
});
event.stopPropagation() und event.preventDefault() -Methoden http://api.jquery.com/category/events/
