jQuery :: Grundlagen Events – Was ist “$(this)”?

In diesem Beitrag soll das Beispiel vom letzten Tutorial erweitert und um weitere Events angereichert werden. Zu der bunten statischen Seite werden dynamische Elemente hinzugefügt. Die Events werden dabei immer durch die Maus ausgelöst. Zum einen erzeugen wir einen Farbwechsel, wenn der Mauszeiger über dem Element ist und wenn er wieder das Element verlässt. Zum anderen kopieren wird bei einem Doppelklick den Text des angeklickten Elementes.

Dafür werden wir den Selektor $(this) verwenden. An diesem Beispiel wird sich auch zeigen, warum dieser Selektor notwendig ist.

Anpassen der Hintergrundfarbe bei einem Event

Das erste Ziel an der Stelle ist es die Hintergrundfarbe der aller <p> Elemente zu ändern, sobald der Mauszeiger sich über dem Element befindet.

Verwendete Methoden

jQuery bietet mehrere Methoden für Events an, welche durch die Maus ausgelöst werden können (jQuery API – Mouse Events). Für unsere Aufgabe sollten folgende zwei Methoden ausreichen:

• .mouseover(): Dieses Event wird dann ausgelöst, wenn die Maus über das Element bewegt wird. Alternativ könnte dafür sicher auch .hover() oder .mouseenter() verwendet werden. Die feinen Unterschiede zwischen den Methoden werden innerhalb der jQuery Doku beschrieben. In diesem Beispiel werden wir die Hintergrundfarbe des Elements bei diesem Event verändern.
• .mouseout(): Wird dann ausgeführt, wenn die Maus das Element wieder verlässt. Für dieses Beispiel setzten wir die Farbe wieder zurück bzw. auf einen leichten anderen Wert.

Ablauf

D.h. der Ablauf an dieser Stelle ist wie folgt:

1. Wenn die Maus über ein <p> Element bewegt wird, so wird die .mouseover() Methode aufgerufen. Dadurch wird die Hintergrundfarbe des <p> Elements verändert.
2. Solange sich der Mauszeiger auf dem Element befindet bleibt die Hintergrundfarbe unverändert.
3. Sobald der Mauszeiger das <p> Element verlässt wird die Farbe erneut verändert. An dieser veränderten Farbe kann erkannt werden über welche Elemente der Mauszeiger bewegt wurde.

Der dafür notwendige Code sieht wie folgt aus:

$("p").mouseover(function(){
 $("p").css("background-color","#00EEEE");
});
$("p").mouseout(function(){
 $("p").css("background-color","#DDDDDD");
});

Das Beispiel komplett sieht wie folgt aus: jq_beispiel_007a.html

Wenn wir nun die Funktionsweise der Seite testen, stellen wir jedoch fest, dass auf einmal alle <p> Elemente die Farbe verändern, sobald der Mauszeiger über ein <p> Element bewegt wird. Diese Funktionsweise ist auch logisch, da der Selektor $(“p”) immer alle <p> Elemente einer Seite selektiert.

Selektion mit $(this)

Ziel ist es nun nur das Element zu selektieren, über welchem sich der Mauszeiger befindet. Hierfür gibt es in jQuery den Selektor $(this). Die Selektion betrifft dabei immer genau das aktuelle jQuery Objekt der Funktion. Insbesondere bei verschachtelten Funktionen ist es sehr schwierig den Überblick zu behalten. Beispiele dazu folgen jedoch in einem späteren Tutorium. Aktuell ist es ausreichend zu wissen, dass wir mit dem Selektor $(this) immer das Element ansprechen, über welchem sich der Mauszeiger aktuell befindet.

Angewendet auf das Beispiel muss der Code wie folgt aussehen:

$("p").mouseover(function(){
 $(this).css("background-color","#00EEEE");
});
$("p").mouseout(function(){
 $(this).css("background-color","#DDDDDD");
});

Mit dieser kleinen Anpassung funktioniert nun der erste Teil. Das komplette Beispiel sieht an der Stelle wie folgt aus: jq_beispiel_007b.html

Kopieren von Text mittels Doppelklick Event

Ein weiteres Event welches Teil dieses Beispieles werden soll ist der Doppelklick. Das Ziel ist es per Doppelklick ein Event auszulösen. Anschließend soll der Text des angeklickten Elementes kopiert und ans Ende des Elementes angehängt werden. Vielleicht ist diese Aktion in der Praxis nicht unbedingt sinnvoll, jedoch kommen dabei mehrere Techniken zum Einsatz.

Verwendete Methoden

Folgende Methoden werden bei dieser Funktionalität zum Einsatz kommen:

• .dblclick(): Dieses Event wird dann ausgelöst, wenn ein Element mit einem Doppelklick angeklickt wird. Dieses Verhalten ist untypisch für Webseiten. D.h. ein normaler Leser der Webseite rechnet nicht damit. Deshalb sollte auf öffentlichen Webseiten auf dieses Event verzichtet werden. Anders ist es auf internen Oberflächen (z.B. Administration eines Content Management Systems). Dort kann hinter einem Doppelklick auch eine Funktion untergebracht werden.
• .after(): Fügt einen Text / Element nach dem Element ein. Der Unterschied zu .append() ist, dass der Text / Element wirklich nach dem Element also auch nach dem schließendem Tag angehängt wird.
• .html(): Setzt den Inhalt eines Elements bzw. gibt den Inhalt zurück.

Ablauf

Jetzt müssen die Aufrufe der Methoden nur noch richtig zusammen gesetzt werden. Um dabei einen Überblick zu behalten hilft es, sich den Ablauf Schritt für Schritt aufzumalen.

Dies ist nun der logische Ablauf. Dies ist jedoch nicht immer genau die Reihenfolge, wie dies im Quellcode umgesetzt wird.

Umwandlung des Ablaufdiagrammes in Code

Bei der Umwandlung dieses Ablaufes in Code lassen sich die einzelnen Methoden einfach verschachteln. Dabei kann man folgende Regeln anwenden.

1. Der Auslöser umschließt alle anderen Methodenaufrufe.
2. Alle anderen Schritte werden von innen nach außen aufgebaut. Wobei der erste Schritt ganz innen innerhalb der Funktionsaufrufe ist und der letzte Schritt ganz außen.

Für das aktuelle Beispiel bedeutet das, dass .dblclick() als Auslöser alle anderen Methoden umklammert. Für die weiteren Aufrufe wird dann von innen nach außen vorgegangen. Am Besten man fängt bei der letzten Methode an. Also .after ist außen und .html ist innen.

Grafisch lässt sich die Umwandlung wie folgt darstellen:

 

Der Code für diesen Aufruf lässt sich in knapp 2 Zeilen darstellen. Jetzt wird auch klar, warum dieser noch relativ übersichtliche Aufruf grafisch dargestellt wurde. Denn als Anweisung für den Rechner ist der einfache Ablauf nicht mehr ganz so leicht lesbar. Wichtig an der Stelle ist auch die Klammern wieder richtig zu setzen.

$("p").dblclick(function(){
   $(this).after("<p>"+$(this).html()+"</p>");
});

Wenn einem der Umgang mit Funktionen und Methoden noch neu ist, ist dieser Aufruf verwirrend und sehr schwer nachzuvollziehen. Diese Anweisung könnte auch mit mehreren Variablen dargestellt werden. Diese Darstellung entspricht eher dem ersten Ablaufdiagramm.

$("p").dblclick(function(){
   var text = $(this).html();
   $(this).after("<p>"+text+"</p>");
});

In dieser Darstellung wird der Ablauf klarer dargestellt. Jedoch werden hierfür unnötig viele Variablen angelegt (also im aktuellen Beispiel nur eine). Zu viele Variablen können den Code auch unübersichtlich machen. Aber an der Stelle gibt es keinen eindeutigen Königsweg. Jeder muss das (an dieser Stelle sind wir noch in einem Einsteigertutorial) für sich selber entscheiden.

Wie funktioniert dieser Code?

$(this).html() liest als erstes den kompletten Quellcode des Elements aus, welches über den Doppelklick selektiert wurde. Die Methode $(this).after() fügt diesen Text nach dem selektierten Element ein.

Was wird durch  jQuery selektiert?

Die Selektion umfasst dabei jedoch nicht die umschließenden Tags. D.h. alles innerhalb der <p> Tags wird selektiert, jedoch nicht die <p> Tags.

Dies soll ein kurz abgewandeltes Beispiel zeigen:

<p>Ich bin hier dein kleiner Blindtext.</p>
<p>Das ist ein <b>zweiter</b> Absatz.</p>

Über die alert() Funktion lassen wir uns erst einmal den selektierten Text ausgeben. Auf diese Weise können wir sehen, welcher Text durch unseren Code kopiert wird.

$("p").dblclick(function(){
  // Ausgabe des selektierten html
  alert($(this).html());
});

Das abgewandelte Beispiel komplett: jq_beispiel_007c.html

Zurück zum Beispiel

$("p").dblclick(function(){
   $(this).after("<p>"+$(this).html()+"</p>");
});

Da der selektierte Text nicht die umschließenden <p> Tags beinhaltet und wir durch das Kopieren neue Absätze erzeugen wollen werden diese innerhalb der Methode .after() gesetzt.

Das komplette Beispiel sieht nun wie folgt aus: jq_beispiel_007.html

Zusammenfassung

Im ersten Schritt wurde mittels der Methoden .mouseover() und .mouseout() die Hintergrundfarbe der einzelnen Absätze verändert. Auf diese Weise kann optisch über die Farbe gezeigt werden, über welche Elemtne der Benutzer mit dem Mauzeiger gefahren ist. Anschließend wurde eine Funktionalität hinzugefügt, welche den Inhalt von Absätzen kopiert. Auslöser für das Kopieren ist ein Doppelklick auf den Absatz.