jQuery und Maus

Ereignisse wie Mausklick und Mausbewegung mit jQuery nutzen.

Es soll eine Ausgabe erfolgen, wenn man auf den Text mit der ID "absatz1" klickt.

Im ersten Schritt müssen wir das Element bestimmen, bei dem reagiert werden soll, wenn darauf geklickt wird.

$('#absatz1')

Und jetzt, was auf welches Ereignis reagiert werden soll:

$('#absatz1').click(function(){
});

Und dann innerhalb der function(){ … } was passieren soll:

$('#absatz1').click(function(){
    	alert('Es wurde auf #absatz1 geklickt');
});

Und hier der gesamte Code mit jQuery:

<script>
$(document).ready(function(){
    /* Hier der jQuery-Code */
    $('#absatz1').click(function(){
    	alert('Es wurde auf #absatz1 geklickt');
    });
});
</script>

Und das sind gleich richtig viele Klammern (runde wie geschweifte) – also höllenmäßig aufpassen, dass die Klammern die richtige Anzahl haben (zu jeder öffnenden muss es eine schließende geben) und die richtig sitzen.

Tipp dabei: sauber einrücken, dann werden Probleme auch schnell sichtbar.

Hat man einen guten Editor macht dieser gleich für jede öffnende eine schließende Klammer.

Mögliche Mausereignisse sind:

• click
• dblclick
• hover
• mouseleave
• mousedown, mouseenter, mousemove, mouseout, mouseover, mouseup

Für aktive Formularfelder wird oft benötigt:

• focus

Beispiel

$('#eingabefeld1').focus(function(){ ... });

Aufgabe: Färben Sie bei Klick auf die Überschrift die Überschrift orange (im letzten Kapitel hatten wir jQuery und CSS)

Wir können genauso auf Benutzereingaben über Tastatur reagieren. Dies wird im folgenden Kapitel kommen.