CSS, HTML und Javascript mit {stil}

jQuery Event Handling

Javascript Libraries wie jQuery und Angular

jQuery normalisiert das Event Handling zwischen den Browsern und bringt Konsistenz in die Eigenschaften target, relatedTarget, pageX, pageY, which und metaKey. Obwohl die modernen Browser heute das DOM API für Events zuverlässig unterstützen, ist der Umgang mit Events in jQuery einfacher.

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 oder moderner window.addEventListener('load', initFunction).

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

oder

window.addEventListener('load', initFunction);

function initFunction() {
   …
}
</script>

oder

window.addEventListener('load', function () {
…
});

addEventListener wird von IE erst ab Version 9 unterstützt, wenn ältere Version von IE noch gefordert sind, müsste hier zusätzlich attachEvent aufgerufen werden.

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.

jQuery $(document).ready vs AddEventListener

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 addEventListener-Aufrufe prüft $(document).ready, ob die HTML-Seite fertig geladen ist und der DOM-Baum durchquert werden kann. Das ist ein Riesenschritt für die Antwortzeit und immer dann eine Alternative, 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:

Scripts starten
$(function() {
    // dieser Code wird ausgeführt, wenn die
    // HTML-Seite geladen ist
});

Dem nativen Javascript – auch als »Vanilla Javascript« bezeichnet, steht heute ein Event zur Verfügung, mit dem "Dom geladen und kann durchquert werden" ebenso gut abgerufen werden kann wie mit $(document).ready() – DOMContentLoaded.

window.addEventListener ('DOMContentLoaded', function () {
    console.log ('DOMContentLoaded Dom ist geladen');
});

DOMContentLoaded: ab IE 9

Events an Element binden

Category: Event Handler Attachment listet die jQuery-Funktionen für das Event Handling. Die wichtigsten sind on() und off(). on() bindet ein Event an die Callback-Funktion, off() entbindet die Callback-Funktion.

$('#test').on("mousemove", onMouseOver);
$('#test').on("click", onMouseKlick);
$('#test').on("mouseleave", onMouseLeave);

function onMouseOver (evt) {
    $('#test').text ( evt.type + " : " + evt.pageX + ' ' + evt.pageY );
}

function onMouseKlick (evt) {
    $('#test').text ( evt.type + " : " + evt.pageX + ' ' + evt.pageY );
    $('#test').off ('mousemove', onMouseOver);
}

function onMouseLeave (evt) {
   $('#test').text ('Raus die Maus');
}

Das Beispiel trackt die Maus-Koordinaten und entbindet bei einem Klick auf das Testfeld den mouseover-Handler. Wenn IE8 und ältere Versionen von Internet Explorer nicht mehr unterstützt werden müssen, ist der Unterschied zum klassischen Javascript-Event-API bei einfachen Beispielen wie hier nicht mehr groß.

Aber jQuery on() kann nicht nur ein Event triggern. Um auf ein weiteres Event mit derselben Funktion zu horchen

$('#test').on("mousemove swipe", onMouseOver);	

Die Events sind einfach durch ein Leerzeichen voneinander getrennt.

jQuery – Events mit preventDefault() unterbinden

Popup mit jQuery

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.


<div>
   <a href="bild.jpg" class="popup">
      <img src="thumbs/bild.jpg" width="250" height="220" alt="bild.jpg" />
   </a>
</div>
…

$('.popup').click (function(event) {
   $(this).parent().prepend('<img src="' + $(this).attr('href') + '" id="popped" />');
   event.preventDefault();
	
   $('img#popped').click(function() {
      $(this).remove();
   });
});

Damit dar eigentlich Ereignis (Folgen des Links) verhindert wird, muss die Funktion 'event' als Parameter übergeben. event.preventDefault() verhindert, dass die ursprüngliche Aktion – dem Link folgen – durchgeführt wird.

Bilder neu laden mit jQuery

GIF-Animation mit jquery starten

Sprite für den sprechenden Rabe von frankes

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>