In der Praxis ist der größte Teil von JavaScript-Code abhängig von bestimmten Ereignissen, also etwa, wenn ein Button angeklickt wird, ein Bereich den Mausfokus erhält, wenn ein Formular versendet werden soll usw. Jedes Ereignis, für das es in HTML Event-Handler gibt, können Sie in jQuery einem Selektor zuordnen. Dieser besteht aus dem Event-Namen ohne das Präfix „on“:

$("p").click() wird beispielsweise ausgeführt, sobald ein p-Element im Dokument angeklickt wird – egal welches.

$("input:text").keyup() wird ausgeführt, wenn in irgendeinem Texteingabefeld ein Tastendruck erfolgt und die Taste losgelassen wird.

$("#LoginFormular").submit() wird ausgeführt, wenn das Formular mit <form id="LoginFormular"> abgesendet wird.

Andere Handler-Funktionen sind beispielsweise dblclick(), keydown(), keyup(), keypress(), mouseenter(), mouseleave(), mouseover(), mouseout(), mousemove(), mousedown(), mouseup(), resize(), scroll(), change(), select(), load() und unload(). Auch die bereits bekannte Funktion ready(), die im Konstrukt $(document).ready() zum Einsatz kommt, gehört dazu.

Um auf solche Ereignisse zu reagieren und abhängigen Code auszuführen, wird als Event-Objekt eine Funktion übergeben.

Beispiel

<form action="javascript:;">
Name: <input type="text" name="Eingabe" value="" style="width: 200px;"><br>
Geben Sie irgendetwas ein und klicken Sie dann woanders hin, um das Eingabefeld zu verlassen!
</form>
<script type="text/javascript">
$(document).ready( function() {
	$("input[name=Eingabe]").blur( function() { 
		if( $(this).attr("value")  == "")
			$(this).attr("value", "Geben Sie Ihren Namen ein!");
	} );
} );
</script>

Erläuterung

Im Beispiel wird auf das Ereignis blur reagiert. Dieses Ereignis tritt ein, wenn der Anwender ein Element fokussiert hat und es nun verlässt. Bei Eingabefeldern tritt es beispielsweise ein, nachdem der Anwender darin etwas eingegeben hat und nun woanders hin klickt oder mit der Tabulator-Taste ins nächste Feld wechseln will. Die anonyme Funktion, die dem blur-Event übergeben wird, prüft, ob in dem betroffenen Element ein Inhalt eingegeben wurde. Wenn das value-Attribut leer ist, hat das Feld keinen Inhalt, oder der Inhalt wurde vom Anwender entfernt. In diesem Fall wird beim Verlassen des Feldes der Hinweis Geben Sie Ihren Namen ein! als Wert in das Feld gesnchrieben.

Mit $(this) können Sie sich innerhalb einer solchen ereignisbehandelnden Funktion auf das oder die betroffenen Elemente beziehen.

Sie müssen übrigens keine anonymen Funktionen wie im Beispiel übergeben. Sinnvoll ist das eigentlich nur, wenn Sie den Code der Funktion nur an dieser einen Stelle benötigen. Soll der gleiche Code auch noch in einem anderen Zusammenhang aufgerufen werden können, ist es besser, die Funktion auf herkömmliche Weise zu notieren. In der Handler-Funktion genügt es dann, den Namen der Funktion zu notieren.

Beispiel

<form action="javascript:;">
Name: <input type="text" name="Eingabe" value="" style="width: 200px;"><br>
Geben Sie irgendetwas ein und klicken Sie dann woanders hin, um das Eingabefeld zu verlassen!
</form>
<script type="text/javascript">
function Feld_leer() {
	if( $(this).attr("value")  == "")
		$(this).attr("value", "Dieses Feld darf nicht leer sein!");
}
$(document).ready( function() {
	$("input[name=Eingabe]").blur( Feld_leer );
} );
</script>

Erläuterung

Das Beispiel tut praktisch des Gleiche wie das Beispiel zuvor, jedoch mit dem Unterschied, dass der Handler-Funktion blur() diesmal keine anonyme Funktion übergeben wird, sondern der Name einer entsprechend benannten Funktion. Die Funktion ist oberhalb notiert. Auffällig ist, dass innerhalb der Funktion einfach mit dem Bezugs-Selektor this gearbeitet wird. So, wie die Funktion aufgerufen wird, ist das zulässig, da der Selektor $("input[name=Eingabe]"), an den der Aufruf der Funktion letztlich gebunden ist, den Bezug für this herstellt.