CSS, HTML und Javascript mit {stil}

jQuery Events

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.

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

DomContentLoaded vs. loadDOMContentLoaded$(document).ready(function()load$(window).on("load", handler)beforeunload/unload$( window ).unload(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.
load
Der Browser hat das Dokument und alle externen Ressourcen geladen.
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.

Das hier funktioniert darum nicht:

<script type="text/javascript">
$('iframe').ready(function(){
     …
});
</script>
<iframe  … ></iframe>

Auf die Reihenfolge kommt es an: Zuerst muss das iframe-Element geladen sein, erst dann kann jQuery auf das Element zugreifen. Dasselbe gilt für alle externen Ressourcen: iframe, img und CSS.

Darum werden werden Scripte meist am Ende des HTML-Dokuments vor dem schließenden body-Tag geladen. Dann ist sichergestellt, dass alle HTML-Elemente (Bilder, Stylesheets, iframe) geladen sind.

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 ein ready-Ereignis erzeugen.

$(document).ready vs addEventListener

$(document).ready prüft, ob das HTML fertig geladen ist und der DOM-Baum durchquert werden kann. Das ist ein großer Schritt für eine kürzere Antwortzeit.

$(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 kürzer schreiben:

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');
});

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

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>

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.