Universitätsrechenzentrum
jQuery

Events

In diesem Abschnitt beschäftigen wir uns mit der Behandlung von Ereignissen.
Einführend soll ein Überblick zu den unterschiedlichen Implementierung gegeben werden:

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!");
});

Eventtypen:

blur focus mousedown resize
change keydown mousemove scroll
click keypress mouseout select
dblclick keyup mouseover submit
error load mouseup unload

weiter Informationen: http://docs.jquery.com/Events

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 ein click 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 den return -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;
});

siehe auch: event.stopPropagation() und event.preventDefault() -Methoden http://api.jquery.com/category/events/

TUCaktuell