Die zuvor beschriebenen direkten Handler-Funktionen genügen in der Regel, um Ereignisse zu behandeln. Dennoch bietet jQuery auch generische Funktionen zur Ereignisbehandlung an. So lässt sich $("#SMS_Text").keyup( function() { } ) auch in der Form $( "#SMS_Text" ).on( "keyup", function() { } ) schreiben. Dabei ist on() eine generische Funktion zur Ereignisbehandlung, der in der einfachsten Form als erster Parameter der Name des zu behandelnden Ereignisses übergeben wird, und als zweiter Parameter eine ereignisbehandelnde Funktion.

Die Funktion on() steht seit jQuery 1.7 zur Verfügung. Davor wurde bind() benutzt. Nützlich ist die Verwendung der generischen Funktion in zwei Fällen:

  1. Wenn ein Ereignis behandelt werden soll, für das es keine fertige Handler-Funktion in jQuery gibt.
  2. Wenn mehrere Ereignisse für den gleichen Selektor behandelt werden sollen.

So gibt es in jQuery beispielsweise noch keine fertigen Handler-Funktionen für neuere, vom W3-Konsortium spezifizierte Touch- und Wisch-Ereignisse bei Tablets und Smartphones. Deshalb können Sie so etwas wie $("#StartButton").touchstart( function() { } ) nicht notieren, sondern müssen es in der Form $( "#StartButton" ).on( "touchstart", function() { } ) tun.

Beispiel

<form action="javascript:;"><input type="text" style="width: 200px;" id="Suche" value="Suchbegriff eingeben"></form>
<script type="text/javascript">
function Suchtext_vorbelegen() {
   if($("#Suche").attr("value") == "")
      $("#Suche").attr("value", "Suchbegriff eingeben");
}
function Suchtext_leeren() {
   if($("#Suche").attr("value") == "Suchbegriff eingeben")
      $("#Suche").attr("value", "");
}
$(document).ready( function() {
   $("#Suche").on( {
      focus: Suchtext_leeren, 
      blur: Suchtext_vorbelegen
   } );
} );
</script>

Erläuterung

Das Beispiel enthält ein alleinstehendes Formularfeld ohne umgebende Beschriftung. Stattdessen steht die Beschriftung Suchbegriff eingeben als Defaultwert im Feld. Sobald der Anwender den Cursor in das Feld setzt, wird der Default-Wert entfernt. Wenn der Anwender das Feld verlässt, wird, falls kein Inhalt darin ist, wieder der Default-Wert eingefügt.

Die beiden Funktionen Suchtext_vorbelegen() und Suchtext_leeren() besorgen das Verwalten des Suchfeldwerts. Der jQuery-Funktion on() werden in diesem Beispiel zwei Ereignisse übergeben: focus (wenn der Anwender den Cursor in das Feld setzt), und blur (wenn er es wieder verlässt).

Dazu werden beide Events in geschweifte Klammern gesetzt. Um dieses Syntax-Konstrukt zu verstehen, muss man wissen, dass on() einfach ein Objekt erwartet. Und mit { } wird in der JSON-Schreibweise von JavaScript ein anonymes Datenobjekt erzeugt. Mit kommagetrennten Konstrukten des Typs Name:Wert lassen sich für ein solches Objekt Eigenschaften und deren Anfangswerte definieren. Die on()-Funktion von jQuery interpretiert diese Objekteigenschaften jedoch als Ereignisnamen, und die zugewiesenen Werte als Handler-Funktionen. Anstelle der Funktionsnamen Suchtext_leeren bzw. Suchtext_vorbelegen könnten Sie an dieser Stelle auch wieder anonyme Funktionen mitsamt Code notieren.