jQuery Schnellstart – Events

Schön das du wieder dabei bist. In der vorherigen Lektion haben wir uns mit Selektoren beschäftigt. Dabei ging es darum, die gewünschten Elemente auf einer Seite auszuwählen. Jetzt geht es um Events bzw. sogenannte Ereignisse.

Was sind Events (Ereignisse)?

Ereignisse werden meist durch die Interaktion des Users mit der Webseite ausgelöst. Das kann beispielsweise der Fall sein, wenn du auf einen Link oder einen Button klickst, ein Text in ein Eingabefeld oder eine Textarea eingegeben wird, die Auswahl in einem Auswahlfeld erfolgt, eine Taste auf der Tastatur gedrückt wird, der Mauszeiger bewegt wird usw.

Du siehst schon, es gibt eine Vielzahl von möglichen Ereignissen.

In einigen Fällen kann der Browser selbst die Ereignisse auslösen, wie z.B. die Ereignisse zum Laden der Seite.

jQuery erweitert die grundlegenden Mechanismen für das Event-Handling, indem es die gängigsten Methoden für die meisten Browser-Events anbietet. Einige dieser Methoden sind:

• ready()
• click()
• focus()
• keypress()
• change(),
• blur()
• usw.

Um beispielsweise JavaScript-Code auszuführen, wenn das Dokument bereit ist, verwendest du die jQuery ready()-Methode, die du bereits kennengelernt hast.

Hier nochmal das Code-Beispiel zur ready()-Methode:

<script>
$(document).ready(function(){
    // Zeige ein Alert mit dem Text "Hallo LerneProgrammieren"
    alert("Hallo LerneProgrammieren");
});
</script>

 

Im Prinzip lassen sich die Events in vier Hauptgruppen einteilen:

1. Maus-Events
2. Tastaturer-Events
3. Formular-Events und
4. Dokument-/Window-Events.

Der folgende Abschnitt gibt dir einen Überblick über all diese Ereignisse sowie die damit verbundenen jQuery-Methoden. Alles in einem angenehmen Schritt-für-Schritt Tempo 😉

1. Mouse-Events

Ein Mouse-Event (oder Mausereignis) wird ausgelöst, wenn der Benutzer auf ein Element klickt, den Mauszeiger bewegt usw. Hier sind einige häufig verwendete jQuery-Methoden zur Behandlung der Mausereignisse.

click()-Event

Die click()-Methode ist ein Event, dass hinter den Selektor geschrieben wird. Die angehängte Funktion wird ausgeführt, wenn der Benutzer auf dieses Element klickt. Im folgenden Beispiel werden die Elemente <p> auf einer Seite ausgeblendet, wenn sie angeklickt werden.

<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).slideUp();
    });
});
</script>

hover()-Event

Die Methode jQuery hover() hängt eine oder zwei Events an die ausgewählten Elemente an, die ausgeführt werden, wenn der Mauszeiger die Elemente betritt ("berührt") und verlässt. Die erste Funktion wird ausgeführt, wenn der Benutzer den Mauszeiger auf ein Element setzt, während die zweite Funktion ausgeführt wird, wenn der Benutzer den Mauszeiger wieder von diesem Element entfernt.

Das folgende Beispiel hebt <p> Elemente hervor, wenn Sie den Mauszeiger darauf platzieren, die Hervorhebung wird entfernt, wenn Sie den Mauszeiger entfernen.

(Hinweis: Das Hover-Event ist quasi eine Kombination der mouseenter() und mouseleave() Events)

<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).addClass("highlight");
    }, function(){
        $(this).removeClass("highlight");
    });
});
</script>

 

Weitere beliebte Mouse Events sind:

• dblclick() - Führe ein Event beim Doppelklick des Elements aus
• mouseenter() - Führe ein Event beim betreten / Berühren des Elements aus
• mouseleave() - Führe ein Event beim Verlassen des Elements aus

Eine vollständige Liste aller jQuery Events findest du hier.

2. Tastatur-Events

Ein Tastaturereignis wird ausgelöst, wenn der Benutzer eine Taste auf der Tastatur drückt oder wieder loslässt. Hier sind einige beliebte jQuery-Methoden zur Behandlung von Keyboard-Events.

Die keypress()-Methode

Die keypress()-Methode hängt ein Ereignis an die ausgewählten Elemente (typischerweise Elemente zum Formular-Handling) an, die ausgeführt wird, wenn der Browser Tastatureingaben vom Benutzer erhält. Im folgenden Code-Beispiel wird eine Meldung angezeigt, wenn das Ereignis keypress() ausgelöst wird.

<script>
$(document).ready(function(){
    var zaehler = 0;
    $('input[type="text"]').keypress(function(){
        $("span").text(zaehler += 1);
    });
});
</script>

 

Weitere Tastatur-Events sind:

• keydown() - Mit dem keydown()-Event wird ein Event an die ausgewählten Elemente angehängt, das ausgeführt wird, wenn der Benutzer zum ersten Mal eine Taste auf der Tastatur drückt.
• keyup() - keyup hängt ein Event an die ausgewählten Elemente an, das ausgeführt wird, wenn der Benutzer eine Taste auf der Tastatur loslässt.

Eine vollständige Liste aller jQuery Events findest du hier.

3. Form-Events (bzw. Formular-Ereignisse)

Ein Formular-Event wird ausgelöst, wenn das Element eines Formulars den Fokus erhält, verliert oder wenn der Benutzer einen Wert des Formular-Elements ändert, z. B. durch Eingabe von Text in eine Texteingabe, die Auswahl einer Option vornimmt usw.

Hier sind einige beliebtesten jQuery-Events für Formulare.

Die change()-Methode

Die jQuery change()-Methode fügt ein Event an die Elemente <input>, <textarea> und <select> an, welches ausgeführt wird, wenn sich ein Wert ändert.

Im folgenden Code-Beispiel wird eine Warnmeldung (Alert) angezeigt, wenn du eine beliebige Option in einem Dropdown-Feld auswählst.

<script>
$(document).ready(function(){
    $("select").change(function(){
        var selectedOption = $(this).find(":selected").val();
        alert("Du hast - " + selectedOption + " - ausgewählt");
    });
});
</script>

Die focus()-Methode

Die focus()-Methode feuert ein Event, wenn ein ausgewähltest Element (oftmals ein Form-Element) den Fokus erhält. Das Code-Beispiel zeigt, was passiert wenn ein Textfeld den Fokus erhält.

<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>

Die blur()-Methode

Die blur()-Methode feuert ein Event, wenn ein ausgewähltest Element (oftmals ein Form-Element) den Fokus verliert. Das Code-Beispiel zeigt, was passiert wenn ein Textfeld den Fokus verliert.

Wie du siehst ist blur() somit das "Gegenteil" von focus()

Das Code-Beispiel zeigt, was passiert wenn ein Textfeld den Fokus verliert:

<script>
$(document).ready(function(){
    $("input").blur(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>

Die submit()-Methode

Ein jQuery Event das noch interessant ist, ist die submit()-Methode. Ein submit() Event wird gefeuert, wenn ein Form-Element abgeschickt wird z.B. bei einem Kontaktformular oder einer abgeschlossenen Bestellung im Online-Shop.

Das Code-Beispiel zeigt, was passiert, wenn ein "ungültiger" Vorname in das Textfeld eingegeben wird.

<script>
$(document).ready(function(){
    $("form").submit(function(event){
        var regex = /^[a-zA-Z]+$/;
        var namePruefen = $("#vorname").val();
        if(regex.test(namePruefen) == false){
            $("#ergebnis").html('<p style="color: red;">Eingabe ungültig</p>').show().fadeOut(1000);
            event.preventDefault();
        }
    });
});
</script>

4. Dokument/Window-Events

Events werden auch ausgelöst, wenn das Seiten-DOM (Document Object Model) bereit (ready) ist oder wenn der Benutzer die Größe des Browser-Fensters ändert oder darin scrollt usw.

Hier sind einige beliebte jQuery-Methoden zur Behandlung solcher Ereignisse.

Die ready()-Methode

Die jQuery ready()-Methode kennst du bereits. Diese Funktion wird ausgeführt, wenn das DOM vollständig geladen ist.

Das folgende Beispiel wird den Text der Paragrafen ersetzen sobald die DOM-Hierarchie erstellt wurde und bereit zur Manipulation ist.

<script>
$(document).ready(function(){
    $("p").text("DOM ist geladen und bereits zum manipulieren. YAY!");
});
</script>

Weitere Document und Window-Events:

resize()-Methode - Die resize()-Methode feuert ein Event, wenn sich die Größe des Browser-Fensters ändert.

scroll()-Methode - Die scroll()-Methode feuert ein Event, wenn der User auf der Seite scrolled. Der Name sagt doch schon alles, oder?

Deine Code-Aufgabe - Jetzt bist du gefragt:

(Die Aufgabenbeschreibung findest du unter dem Code-Editor)

[lp_spoiler title="Komplettlösung anzeigen" class="da"]

Das ist die Komplettlösung beider Aufgaben:

<script>
  $(document).ready(function() { 
    $(".button1").click(function() {
      alert("Hallo ich heiße Daniel");
      });
   });
</script>

[/lp_spoiler]

Fazit

Das waren die vier Hauptgruppen der jQuery Events. Es ist an dieser Stelle nicht wichtig, dass du diese auswendig kennst.

Wenn du die folgenden Übungen durcharbeitest solltest du das große Ganze von Events verstanden haben. Es geht in dieser Lektion also eher darum, den Einsatz von Events verstanden zu haben.

Zum Nachschlagen ist hier nochmal die vollständige Liste aller jQuery Events verlinkt.

In der nächsten Lektion beginnt deine erste Coding-Challenge. Bist du bereit dein jQuery-Wissen aus Lektion 1 unter Beweis zu stellen? Wir sehen uns gleich! 😉