event.data?
event.data
können Sie für statische Werte nutzen, die schon beim Binden bekannt sind. Wenn die zu übergebenden Daten erst später ausgewertet werden dürfen (oder jedes Mal anders sein können), hilft Ihnen
event.data
nicht weiter.
Sofortiger Zugriff auf ein Element (noch vor document.ready)
Problem
Sie brauchen so schnell wie möglich Zugriff auf ein bestimmtes DOM-Element.
Die Verwendung von
document.ready
ist nicht schnell genug – Sie müssen mit dem Element schon arbeiten, bevor die Seite fertig geladen wurde.
Solche Situationen treten vor allem bei großen Seiten auf, bei denen das Event
document.ready
erst nach einiger Zeit ausgelöst wird.
Lösung
Dies ist ein sehr häufig auftretendes Problem, das sich auf unterschiedliche Art und Weise lösen lässt.
Es gibt einen Ansatz, der immer funktioniert. Allerdings muss dazu das DOM per Polling abgefragt werden, was den Render-Prozess verlangsamen kann (nicht wünschenswert!).
Ein paar der Probleme, um die es sich da dreht, sind folgende:
Ein Element verbergen (oder eine andere Änderung am Style vornehmen), noch bevor es gerendert wurde
Eventhandler sofort an ein Element binden, so dass es schnell genutzt werden kann
Andere Situationen
Wir werden das beste Vorgehen für jede dieser Situationen im Diskussionsabschnitt behandeln.
Diskussion
Ein Element direkt verbergen (oder eine andere Änderung am Style vornehmen)
Bei Ihrem Problem geht es direkt um Stylefragen – Sie wollen einem Element in Abhängigkeit von anderen Informationen in seinem Style verändern. Diese Abhängigkeit muss per JavaScript entschieden werden.
Dazu fügt man einem Element, das frühzeitig verfügbar ist (wie zum Beispiel das
-Element), eine CSS-Klasse hinzu, um dann das gewünschte Element dementsprechend anzupassen.
Schauen Sie sich folgenden Code an:
Ich sollte nicht sichtbar sein
Eventhandler so schnell wie möglich an ein Element binden
Sehr häufig haben wir eine große Seite mit interaktiven Elementen, wie zum Beispiel Buttons und Links.
Diese Elemente sollen beim Laden der Seite nicht nur einfach zu sehen sein, sondern auch schon funktionieren.
Glücklicherweise gibt es ein großartiges Konzept namens Event-Delegation , das einem den Tag retten kann. Die Event-Delegation lässt sich mit einem der vielen jQuery-Plugins problemlos implementieren und seit jQuery 1.3 braucht man nicht einmal mehr ein Plugin, weil die Funktionalität in den Core gewandert ist.
Sie können jetzt Eventhandler mit der Methode
live()
an Elemente binden, die noch gar nicht existieren. [ 4 ] So müssen Sie nicht darauf warten, dass die Elemente bereit sind, um sie mit Events zu verbinden.
Mehr zur Event-Delegation lesen Sie in Eventhandler für neu hinzugefügte Elemente nutzbar machen .
Andere Situationen
Bei Ihrem Problem geht es nicht um Styles oder Events. Tja, dann müssen Sie mit dem schlimmsten rechnen.
Aber verzweifeln Sie nicht! Es gibt eine bessere Lösung, als das DOM per Polling abzufragen, wenn Sie sich Sorgen um die Performance machen. Ich werde dies zum Schluss erläutern.
Polling
Man kann das Polling über ein einfaches Intervall implementieren (
setInterval
), das prüft, ob ein Element schon da ist, und in diesem Fall eine bestimmte Funktion ausführt und die wiederholte Prüfung beendet.
Es gibt zwei Plugins,die Ihnen dabei helfen können. Das eine ist
LiveQuery
, [ 5 ] bei dem die Möglichkeit besteht, eine Funktion zu registrieren, die für jedes neu gefundene Element ausgeführt wird, das einem Selektor entspricht. Dieses Vorgehen ist ziemlich langsam, aber es sind alle Selektoren nutzbar.
Ein weiteres Plugin namens
ElementReady
[ 6 ] kümmert sich ebenfalls um diese Situation.
Dabei registrieren Sie
id
/
function
-Paare und das DOM wird per Polling abgefragt. Wurde eine
id
gefunden, wird die
function
aufgerufen und die
id
aus der Queue entfernt.
Dieses Plugin implementiert den wahrscheinlich schnellsten Ansatz, um Elemente zu finden –