Stil mit {stil}

Sep 2008

jQuery Event Handling

Event Handler sind Mechanismen, die Ereignisse (Mausklicks, das Absenden eines Formular durch den Submit-Button, das Schließen eines Fensters usw.) erkennen und Aktionen als Antwort auf das Ereignis durchführen – Funktionen, die das Skript beim Eintreten eines Ereignisses aufgeruft.

Ausführliche Beschreibung des Javascript-Ereignismodells … 

Herkömmlicher Scriptstart | Bevor ein Skript ausgeführt werden kann, muss das vollständige Dokument beim Besucher geladen sein. Darum lautet der erste Skriptaufruf i.d.R. window.onload.

<script type="text/javascript">
window.onload = initShowHide;

function initShowHide()
{
   …
}
</script>

Bis das Dokument mit allen Elementen wie Bildern und Stylesheets vollständig geladen ist, kann es zu einer sichtbaren Verzögerung beim Start des Skripts kommen. Wenn nur das HTML-Dokument für das Skript erforderlich ist – nicht aber Elemente wie Bilder und Filme –, kann jQuery schon ein ready-Ereignis erzeugen.

Skripte starten mit jQuery

Der Funktion $() können nicht nur CSS-Selektoren, sondern auch Arrays und Objekte übergeben werden – z.B. das window-Objekt.

$(window).load(function() {
    // dieser Code wird ausgeführt, wenn das komplette
    // Dokument im Browser geladen ist.
});

Anstelle der obligatorischen window.onload- oder addEvent-Aufrufe prüft $(document).ready, ob das HTML-Dokument fertig geladen ist, so dass der DOM-Baum durchquert werden kann. Das ist ein Riesenschritt für die Antwortzeit und immer dann eine Alternative zu window.onload oder $(window).load, wenn das DOM durch ein Script angesprochen wird.

$(document).ready(function() {
    // dieser Code wird ausgeführt, wenn das HTML-Dokument
    // geladen – also das DOM fertig aufgebaut – ist.
    $("h1").text("Das DOM ist geladen und kann durchquert werden");
});

… 

Selbst das lässt sich noch abkürzen:

$(function() {
    // dieser Code wird ausgeführt, wenn das
    // HTML-Dokument geladen ist
});

jQuery :: Vorgegebene Ereignisse verhindern mit preventDefault()

Eine immer wiederkehrende Aufgabe: Beim Klick auf einen Link spielt Javascript zusätzliche Elemente ein – in diesem Beispiel eine größere Version des Bildes ohne das Öffnen eines zusätzlichen Browserfensters. Wenn Javascript nicht aktiviert ist, folgt der Klick dem Link auf konventionelle Weise. Damit die ursprüngliche Aktion – das Folgen des Links – bei aktivem Javascript nicht ausgeführt wird, muss die ursprüngliche Aktion unterbunden werden.

<p><a href="bild.jpg" class="popup">
   <img src="thumbs/bild.jpg" width="250" height="220" alt="bild.jpg" />
   </a>
</p>
…
<script type="text/javascript">
$(function() {
   $('a.popup').click (function(event) {
      $(this).parent().prepend('<img src="' + 
          $(this).attr('href') + '" id="popped" style="position: absolute;" />');
      event.preventDefault();
      
      $('img#popped').click(function() {
         $(this).remove();
      });
   }); 
});
</script>

Damit dar eigentlich Ereignis verhindert wird, muss der Funktion das 'event' als Parameter übergeben. Die Anweisung event.preventDefault() verhindert, dass die ursprüngliche Aktion durchgeführt wird.

Bilder neu laden mit jQuery

Damit eine GIF-Animation beim Hovern mit der Maus neu geladen und erneut gestartet wird:

<script type="text/javascript">
$(document).ready(function() {
    $("img#ani").mouseover(function () {
    	$(this).attr({ src: "animation.gif" });
    })
});
</script>