jQuery Events | mediaevent

Dokument geladen

Drei Events geben im Lebenszyklus einer Webseite den Takt fürs Scripten vor:

jQuery Load Events — DomContentLoaded vs. load

$(function () { (DOMContentLoaded): Der Browser hat das HTML vollständig geladen, der DOM-Baum steht, aber externe Ressourcen wie Bilder und Stylesheets sind noch nicht geladen.
$( window ).on("load", handler) (load): Der Browser hat das Dokument und alle externen Ressourcen (vor allem alle Bilder) geladen.
$( window ).unload(function() (beforeunload/unload): Wenn der Browser die Seite verläßt.

Bevor Script-Anweisungen ausgeführt werden können, müssen die beteiligten Elemente vollständig geladen sein.

Funktioniert nicht

<!DOCTYPE html>
<html>
<head>
    <title>jQuery aufrufen</title>
    <script src="…jquery-3.2.1.min.js"></script>
    <script>
        const length = $("h2").length;
        console.log(length);
    </script>
</head>
<body>
    …
</body>
</html>

Auf die Reihenfolge kommt es an: Zuerst muss das h1-Element geladen sein, erst dann kann jQuery auf das Element zugreifen.

So wird nen Schuh draus

<script asnc src="…jquery-3.2.1.min.js"></script>

<script>
$(function() {
    let length = $("h2").length;
    console.log(length);
});
</script>

Bis das Dokument mit allen Elementen wie Bildern und CSS-Dateien 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 –, konnte jQuery dank $(function) schneller starten als reines Javascript. Bevor die Browser DOMContentLoaded auf breiter Basis unterstützen, war der schnelle Eingriff ein großer Vorteil von jQuery gegenüber reinem Javascript.

jQuery 3: $(function ()

Vor jQuery 3 gab es mehrere Versionen des ready-Aufrufs

$(function ()                   // direkt – nicht auf einem individuellen Element

$( document ).ready( handler )  // auf dem document-Element
$( "iframe" ).ready( handler )  // auf in individuelles Element
$().ready( handler )            // auf einem leeren Element

Quelle: .ready()

Diese Varianten sind funktional gleich. Die handler-Funktion wird aufgerufen, sobald das DOM vollständig geladen ist – gleich, auf welchem Element das Event abgerufen wird.

Der Aufruf mit $( "img" ).ready oder $( "iframe" ).ready gegenüber $(document).ready klingt zwar, als würde die Funktion aufgerufen, wenn das Bild geladen wurde — so funktioniert das allerdings nicht. ready feuert, wenn das DOM vollständig geladen ist.

Mit jQuery3 gelten alle Versionen außer $(function () als deprecated - veraltet.

$(function() vs DOMContentLoaded

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 $(function() – DOMContentLoaded.

document.addEventListener ("DOMContentLoaded", function () {
   let length = document.querySelectorAll("h2").length;
   console.log ('DOMContentLoaded ' + length);
});

Allerdings wird die callback-Funktion nicht ausgeführt, wenn das Event bereits gefeuert hat (z.B. durch ein zuvor geladenes externes Script ).

jQuery prüft den readyState-Zustand des Dokuments und führt die callback-Funktion sofort aus.

let callback = function(){
    // Event Handler
};

if ( document.readyState === "complete" ||
    (document.readyState !== "loading" && !document.documentElement.doScroll)) {
    callback();
} else {
    document.addEventListener("DOMContentLoaded", callback);
}

Wann wird .ready() gebraucht?

$(function() wird nur gebraucht, wenn das Script im head-Element der Seite geladen wird.

Wird Script hingegen erst am Ende des body-Elements geladen, sind auch alle Element der Seite sowieso geladen.

Darum werden werden Scripte heute bevorzugt am Ende des HTML-Dokuments vor dem schließenden body-Tag geladen. Dann ist sichergestellt, dass das DOM geladen ist und auf die Elemente zugegriffen werden kann. Ohne $(function() und ohne DOMContentLoaded:

Scripte ans Ende des Dokuments verschieben

<!DOCTYPE html>
<html>
<head>
   <title></title>
</head>
<body>
…
<script asnc src="/dist/jquery-3.2.1.min.js"></script>

<script>
let length = $("h2").length;
console.log ( length );
</script>
</body>

jQuery: Bild asynchron laden

<img class="loading" src="pixel.gif">

pixel.gif ist ein 1px großes gif-Bild. Das CSS für das leere GIF ist

.loading { 
    background: url("loading.gif") 50% no-repeat; 
    width:100%;
    border:1px solid silver 
}

loading.gif ist ein animiertes GIF, ein klassisches Warte-Icon.

Das Bild wird mit jQuery programmatisch erzeugt (let $downloadingImage = $("<img>"). Sobald der Pfad zum Bild notiert ist, beginnt der Ladeprozess und sobald der Ladeprozess beendet ist, feuert das Event.

let $image = $("img.loading");
let $loading = $("<img>");

$loading.on('load', function(){
  $image.attr("src", $(this).attr("src"));
});

$loading.attr("src", "large-elefant.png");

Bild mit Javascript asynchron laden

Das ist kurz und überschaubar. Aber jQuery einbinden, nur weil ein Bild asynchron geladen wird? Heute ist natürliches Javascript ohne Zusatzstoffe genauso weit.

(function () {
let image = document.querySelector(".loading");

let loading = new Image();
loading.onload = function () {
    image.src = this.src; 
}

loading.src = "buffalo.jpg";
})();

Events an ein 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

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

Sprite für den sprechenden Rabe von frankes

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

$(function() {
    $(".talk").mouseover(function () {
    	$(this).attr({ src: "talking-rabe.gif" });
    })
});

bind, delegate, die, error,live,load, toggle, unbind, undelegate, unload sind in jQuery Version 3 nicht mehr erwünscht.

blur, change, click, dblclick, dblclick, focus, focusin, focusout, hover, keydown, keypress, keyup, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, resize, scroll, select, submit: Auslösen bzw. Zuordnen des Events
event.currentTarget: Das aktuelle DOM-Element innerhalb der bubbling-Phase
event.data: Daten, die der Event-Methode übergeben werden, wenn der aktuelle ausgeführte Event Handler angebunden ist.
event.delegateTarget: Gibt das Element zurück, an das der aktuelle Event Handler gebunden ist.
event.isDefaultPrevented: Gibt zurück, ob event.preventDefault angewiesen ist.
event.isImmediatePropagationStopped: Gibt zurück, ob event.stopImmediatePropagation für das Event-Objekt aufgerufen wurde.
event.isPropagationStopped: Gibt zurück, ob event.stopPropagation für das Event-Objekt aufgerufen wurde.
event.namespace: Gibt des Namespace zum Zeitpunkt des Auslösens zurück.
event.pageX: Gibt die Postion der Maus relativ zum linken Rand des Dokuments zurück.
event.pageY: Gibt die Postion der Maus relativ zum oberen Rand des Dokuments zurück.
event.preventDefault: Verhindert die vorgegebene Aktion des Events.
event.relatedTarget: Gibt das Element zurück, das durch die Bewegung der Maus betreten oder verlassen wurde.
event.result: Enthält den letzten / vorausgehenden Wert, der vom Event Handler zurück gegeben wurde.
event.stopImmediatePropagation: Verhindert, dass andere Event Handler aufgerufen werden.
event.stopPropagation: Verhindert das Aufsteigen (bubbling) des Events, so dass Eltern-Element nicht vom Eintreten des Events benachrichtigt werden.
event.target: Gibt das Event-auslösende Element zurück.
event.timeStamp: Gibt den Zeitpunkt des Eintretens des Events als Millisekunden vom 1.1.1970 zurück.
event.type: Gibt des Typ des Events zurück.
event.which: Gibt die Taste oder den Mausbutton zurück.
off: Entfernt den Event Handler, der mit on zugewiesen wurde
on: Weist dem Element den Event Handler zu
one: Weist den ausgewählten Elementen einen oder mehrere Event Handler zu. Dieser Handler kann dem Element nur einmal pro Element zugewiesen werden.
$.proxy: Nimmt eine existierende Funktion und gibt eine neue mit einem speziellen Kontext zurück
ready: Funktion wird ausgeführt, wenn das DOM vollständig geladen ist.
trigger: Triggert alle Events, die an das gewählte Element gebunden sind.
triggerHandler: Triggert alle Funktionen, die an das Event für das gewählte Element gebunden sind.