Dieses Blog ist nicht länger aktiv!

Hier wird es in Zukunft keine neuen Inhalte geben, allerdings bloggen die Autoren weiter. Die Designartikel werden nun auf dem persönlichen Blog von Ivo Mynttinen veröffentlicht, während Artikel in denen es um Webdevelopment geht demnächst hier veröffentlicht werden.

Weitere Projekte der Autoren: Fireworks Lab - Kostenlose Adobe Fireworks Dateien

jQuery für Einsteiger – Teil 3: Events

März 31st, 2010 | von Alexander Trefz | Tutorials, jQuery

Dieser Teil der “jQuery für Einsteiger”-Serie dreht sich ausschließlich um Events. Es wird ausführlich erklärt was Events sind, wofür man sie benutzt und wie man eigene Events in jQuery erstellen kann.

Frühere Teile dieser Serie

Was sind Events?

Events, zu Deutsch Ereignisse, werden durch bestimmte Aktionen ausgelöst. Das “click”-Event zum Beispiel wird ausgelöst wenn das jeweilige Element geklickt wird. Diesen Events kann man so genannte “handler”, also Funktionen, anhängen, welche erst dann ausgeführt werden, wenn das Event ausgelöst wird.

Wozu dienen Events?

Events dienen dazu auf ein bestimmtes Ereignis, also beispielsweise wenn jemand auf einen Button klickt zu reagieren. Wenn bsw. jemand bei einem Slider auf den “Pfeil-nach-links”-Button drückt, soll sich der Inhalt des Sliders nach Links bewegen. Genau das erreicht man über das click-Event.

Events in jQuery

In den ersten beiden Teilen dieser Serie haben wir bereits ein paar Event-handler erstellt, nämlich jedes mal wenn wir .click() auf ein Element angewendet haben. .click setzt einen Event-handler für das Click-event, bei den meisten anderen Events funktioniert dies nach dem gleichen Schema. Hover ist hierbei jedoch eine Ausnahme, da die hover Funktion an 2 Events, mouseenter und mouseleave, Eventhandler anhängt, benötigt sie 2 übergebene Funktionen. die erste für mouseenter, die zweite für mouseleave. Alternativ kann auch nur eine Funktion übergeben werden, diese wird dann an beide Events angehängt.

1
2
3
4
5
6
7
8
9
10
$("#Click").click(function(){
    console.log("#Click wurde geclickt.");
});

$("#Hover").hover(
function(){ // mouseenter
    console.log("Die Maus befindet sich über #Hover.");
},function(){ // mouseleave
    console.log("Die Maus befindet sich nicht mehr über #Hover.")
});

Demo(Console benötigt)



Events werden in verschiedene Gruppen unterteilt, jedoch gibt es Events, wie beispielsweise focus, welches sowohl von der Maus als auch von der Tastatur ausgelöst werden kann und somit in beiden Gruppen(Maus-Events, Tastatur-Events) fällt. Ich werde nun ein paar der wichtigsten Events kurz vorstellen.

Maus Events

click

Wird ausgelöst nachdem dasselbe Element erst das mousedown, und danach das mouseup-event ausgelöst hat.

mouseenter

Wird ausgelöst sobald sich der Cursor über dem entsprechenden Element befindet.

mouseleave

Wird ausgelöst sobald sich der Cursor nicht mehr über dem entsprechenden Element befindet.

Form Events

focus

Wird ausgelöst sobald ein Element von der Maus oder der Tastatur fokussiert wird.

blur

Wird ausgelöst sobald ein Element den Fokus wieder verliert.

submit

Wird ausgelöst sobald eine <form> abgesendet wird.

Alle Events und weitere Methoden finden sich in der englischsprachigen jQuery API.

Eventargumente

Eventargumente enthalten Daten des Events und werden an den Eventhandler übergeben. So wird beispielsweise bei allen Events das target, also das Zielelement in den Eventargs übergeben. Bei Maus- und Tastatur-Events wird unter anderem auch die gedrückte Taste mitübergeben.

1
2
3
$("#Click").click(function(event){  // wir übernehmen den optionalen Event-parameter
    console.log(event);             // dieser kann jeden beliebigen Namen annehmen
});

Der Eventparameter ist ein Object. Das heißt er hat mehrere Attribute welche Aufgerufen werden können.

1
2
3
4
$("#Click").click(function(event){
    console.log(event.target.id);
    $(event.target).css("width", "200px");
});

Demo(Console benötigt)

Bubbling

Bubbling bezeichnet ein Verhalten von Events, beim Bubbling wird das Event an die Elternelemente des eigentlichen Event-Auslösers, und danach auch an deren Eltern, weitergegeben. Dadurch wird das Event dort auch ausgelöst. Nicht alle Events bubblen, blur und focus gehören zu diesen “nicht bubblenden Events”. Aus diesem Grund gibt es seit jQuery 1.4 zwei neue “virtuelle” Events: focusin(wird von focus ausgelöst) und focusout(wird von blur ausgelöst) welche bubblen.

1
2
3
<form id="parent">
    <input type="text" id="child">
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("#parent").focus(function(){ // wird nie ausgelöst
    console.log("focus");
});

$("#parent").focusin(function(){
    console.log("focusin");
});

$("#parent").blur(function(){ // wird nie ausgelöst
    console.log("blur");
});

$("#parent").focusout(function(){
    console.log("focusout");
});

Demo(Console benötigt)

Ähnliche Artikel

  1. jQuery für Einsteiger – Teil 1: Die erste Animation
  2. jQuery für Einsteiger – Teil 2: erweitere Animationen
  3. Es geht los!

Mit anderen teilen

Der Autor

Alexander Trefz

Hallo, ich bin Alex. Ich gehöre zu den Entwicklern die sich selbst viel zu oft Sätze wie: "Ich bin in 5 Minuten fertig!", sagen hören. Ich kann einfach nicht Essen oder Schlafen gehen, wenn mein Code noch Fehler produziert.

2 Kommentare

  1. max sagt:
    28. Oktober 2010 um 19:09

    Hallo Alexander!

    Sehr schönes und anschauliches Tutorial. Vielen Dank!

    Eine Frage aber: Was bedeutet. “Console benötigt”. Was bedeutet das?

    Grüße von Max

    Antworten

  2. max sagt:
    29. Oktober 2010 um 00:08

    Hi!

    Ich nochmal. Hab’s verstanden. Firebug wäre eine solche Konsole.
    Habe mir dieses Firefox addon heruntergeladen. Eine Console ist also eigentlich so eine Art Debugger.

    Grüße von Max

    Antworten

Hinterlasse einen Kommentar