12.3 Ereignisse
Bisher haben wir lediglich das Klick-Ereignis zum Starten von jQuery-Code genutzt. In diesem Abschnitt werden wir weitere Ereignisse einsetzen.
In Abbildung 12.6 sehen Sie ein div-Element, darunter eine Reihe von Hyperlinks. Das Auslösen eines der Ereignisse auf dem jeweiligen Link führt jedes Mal zu einer animierten Verbreiterung des Elements. Dabei kommt die Methode animate() zum Einsatz. Sie erzeugt wie in einem Film durch eine Abfolge von Einzelbildern den Eindruck eines gleichmäßigen Ablaufs. Mehr zu animate() erfahren Sie im nächsten Abschnitt.
Abbildung 12.6 Verschiedene Ereignisse
Es folgt der Code:
<!DOCTYPE html><html><head><meta charset="utf-8">
<title>jQuery, Ereignisse</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function()
{
$("#idLink1").click(function(){
$("#idRect").animate({"width":"+=20px"}); });
[… weitere jQuery-Funktionen, siehe Erläuterung …]
});
</script>
<style>
a {background-color:#f0f0f0; line-height:150%}
</style>
</head>
<body>
<div id="idRect" style="width:200px; height:100px;
background-color:#aaaaaa">Rechteck</div>
<p><a id="idLink1" href="#"> 1: click</a><br>
[… weitere Hyperlinks, siehe Abbildung …]
</body></html>
Listing 12.3 Datei »jq_ereignis.htm«
Das div-Element hat die ID idRect, eine Größe von 200 mal 100 Pixel und eine graue Farbe. Die Ereignisse haben die folgenden Auswirkungen:
Die Ihnen bereits bekannte Methode click() wird einmalig durch einen einfachen Klick auf den Link ausgelöst. Das Element wird 20 Pixel breiter.
$("#idLink1").click(function(){
$("#idRect").animate({"width":"+=20px"}); });
Die folgenden Methoden führen alle zur gleichen Animation, daher wird nur noch der Methodenkopf dargestellt.
Die Methode dblclick() wird einmalig durch einen doppelten Klick auf den Link ausgelöst:
$("#idLink2").dblclick(function(){
$("#idRect").animate({"width":"+=20px"}); });
Die Methoden mouseenter() bzw. mouseover() werden einmalig durch das Betreten des Links mit der Maus ausgelöst:
$("#idLink3").mouseenter(function(){
$("#idRect").animate({"width":"+=20px"}); });
Die Methoden mouseleave() bzw. mouseout() werden einmalig durch das Verlassen des Links mit der Maus ausgelöst:
$("#idLink4").mouseleave(function(){
$("#idRect").animate({"width":"+=20px"}); });
Die Methode mousemove() wird permanent durch das Bewegen der Maus innerhalb des Links ausgelöst. Das Ereignis tritt häufig auf, wird gespeichert und später abgearbeitet. Daher kann es schon bei einer kleinen Bewegung zu einer ganzen Reihe von Animationen kommen:
$("#idLink5").mousemove(function(){
$("#idRect").animate({"width":"+=20px"}); });
Die Methode mousedown() wird einmalig durch das Herunterdrücken einer Maustaste innerhalb des Links ausgelöst. Falls Sie einmal rechtsklicken: Die rechte Maustaste ist in den Browsern häufig belegt, so dass häufig gleichzeitig ein Kontextmenü aufklappt:
$("#idLink6").mousedown(function(){
$("#idRect").animate({"width":"+=20px"}); });
Die Methode mouseup() wird einmalig durch das Loslassen einer heruntergedrückten Maustaste innerhalb des Links ausgelöst:
$("#idLink7").mouseup(function(){
$("#idRect").animate({"width":"+=20px"}); });
Die Methode hover() vereinigt die beiden Ereignisse mouseenter und mouseleave. Sie wird also sowohl durch das Betreten als auch durch das Verlassen des Links mit der Maus ausgelöst:
$("#idLink8").hover(function(){
$("#idRect").animate({"width":"+=20px"}); });
Die jQuery-Methode bind() dient dazu, Ereignisse an Methoden zu binden. Die anderen Methoden in diesem Abschnitt sind eigentlich Spezialisierungen der Methode bind() in abgekürzter Form. Beachten Sie, dass es sich nicht um die JavaScript-Methode bind() handelt.
Hier erfolgt die Bindung für die Ereignisse mousedown und mouseup. Die Animation wird also sowohl durch das Herunterdrücken als auch durch das Loslassen einer Maustaste innerhalb des Links ausgelöst:
$("#idLink9").bind("mousedown mouseup", function(){
$("#idRect").animate({"width":"+=20px"}); });
Bei jedem der genannten Ereignisse stellt JavaScript Informationen zum Ereignis in einem Ereignisobjekt bereit. Durch jQuery wird dieses Ereignisobjekt über alle Browser vereinheitlicht. Sie greifen über einen Verweis darauf zu, den Sie der Methode als Parameter übergeben.
Beim Klick auf Link 10 wird ein Teil der Informationen ausgegeben, hier Art, Ort und Zeitpunkt des Ereignisses, mithilfe der Eigenschaften type, pageX, pageY und timeStamp:
$("#idLink10").click(function(e){
$("#idRect").html("Ereignis: " + e.type
+ "<br>Ort X: " + e.pageX + " , Y: " + e.pageY
+ "<br>Zeit: " + Date(e.timeStamp)); });
Der timeStamp wird in Millisekunden angegeben. Sie können ihn mithilfe von Date() umwandeln.