Wenn du deinen Browser benutzt, registriert er verschiedene Arten von Events: etwa wenn dein Nutzer auf einen Button klickt, ein Formular abschickt oder mit der Maus über ein Element fährt. So sagt dir der Browser, dass der Nutzer gerade eine Aktion ausgeführt hat. Dein Skript kann dann auf diese Events reagieren. Meistens antworten Skripte darauf, indem sie den Inhalt der Seite über das document-Objekt aktualisieren, was die Seite interaktiver macht. In diesem Kapitel liste ich dir die verschiedenen Event-Typen auf, mit denen du arbeiten kannst, um deine Seiten etwas lebendiger zu machen.
Dieser Artikel ist nicht vollständig und wird noch aktualisiert
Einem Event eine Funktion zuweisen
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world');
}
bouton.onclick = MonAlert;Alle modernen Browser verstehen diese Art, einem Event eine Funktion zuzuweisen. Du kannst pro Event allerdings nur eine einzige Funktion hinterlegen und ihr keine Parameter übergeben: Die Klammern müssen weg, sonst würde der Code sofort ausgeführt.
Nachteil
Sobald du einem Event mehrere Funktionen zuweist, überschreibt die neue Zuweisung die vorherige.
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world!');
}
function AlertTOTO() {
alert('Toto!')
}
bouton.onclick = MonAlert;
bouton.onclick = AlertTOTO;Das Ergebnis ist die Meldung Toto!.
Event Listener
Event Listener sind die modernere Methode: Mit ihnen weist du einem Event mehrere Funktionen auf einmal zu.
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world!');
}
function AlertTOTO() {
alert('Toto!');
}
bouton.addEventListener('click', MonAlert);
bouton.addEventListener('click', AlertTOTO);Die Methode addEventlistener() nimmt drei Parameter:
element.addEventlistener('evenement', NomDeFonction, Boolean);
- evenement: der Name des Events, das du abhören willst ( blur, click, … );
- Der Code, den du ausführen willst, eine benannte oder eine anonyme Funktion.
- Ein
boolean, der die Ausbreitung des Events bestimmt, standardmäßig steht dieser Wert auf false.
Nachteil
Ältere Browser unterstützen diese Methode nicht.
Parameter übergeben
Wir haben gesehen, dass eine Funktion, die einem Event zugewiesen wird, ohne Klammern geschrieben wird. Um trotzdem Parameter zu übergeben, weist du dem Event eine anonyme Funktion zu und rufst darin deine Funktion mit ihren Parametern auf.
function MonAlert(message) {
alert(message);
}
bouton.addEventListener('click', function() {
MonAlert('Mon message qui s'affiche!');
});Das Event-Objekt
Sobald ein Event eintritt, gibt es dazu ein Event-Objekt mit Informationen über das Event und über das Element, auf dem es ausgelöst wurde.
var bouton = document.getElementById('click');
function MonAlert(e) {
console.log(e.target);
}
bouton.onclick = MonAlert;Mit einem Event Listener und Parametern
var bouton = document.getElementById('click');
function MonAlert(e, message) {
console.log(e.target);
console.log(message);
}
bouton.addEventListener('click', function(e){
MonAlert(e, "hello world!");
});Eigenschaften
| Eigenschaft | Beschreibung |
|---|---|
target | Das Element, das das Event ausgelöst hat |
type | Das Event, das ausgelöst wurde |
Methoden
| Methode | Beschreibung |
|---|---|
preventDefault() | Bricht das Standardverhalten eines Events ab (sofern es abbrechbar ist) |
stopPropagation() | Stoppt die Ausbreitung des Events. |
Liste der Events
Hier eine kleine, nicht vollständige Liste der Events, die dir regelmäßig begegnen.
Browser
| Event | Beschreibung |
|---|---|
load | Wird ausgelöst, wenn der Browser mit dem Laden fertig ist. Es kann auch für andere geladene Elemente wie Bilder, Skripte oder Objekte feuern. |
unload | das Gegenstück zum Event load: Es wird ausgelöst, wenn die Seite gewechselt wird. |
resize | wird ausgelöst, wenn der Nutzer die Größe seines Browserfensters ändert. |
scroll | wird ausgelöst, wenn der Nutzer die Seite oder ein Element scrollt. |
error | error wird ausgelöst, wenn der Browser auf einen JavaScript-Fehler stößt. |
Maus
| Event | Beschreibung |
|---|---|
click | Wird ausgelöst, wenn der Nutzer auf ein Element klickt |
dblclick | Wie click, nur wenn der Nutzer schnell doppelt klickt. |
mouseup | Wird ausgelöst, wenn der Nutzer eine Maustaste gedrückt hält. |
mousedown | Wird ausgelöst, wenn der Nutzer eine Maustaste loslässt. |
mousemove | Wird ausgelöst, wenn sich der Cursor bewegt. |
mouseover | wird ausgelöst, wenn der Cursor über ein Element fährt. |
mouseout | wird ausgelöst, wenn der Cursor ein Element verlässt, über dem er stand, oder eines seiner Kindelemente. |
Tastatur
| Event | Beschreibung |
|---|---|
input | Wird ausgelöst, wenn sich der Wert eines <input>– oder <textarea>-Elements ändert. |
keydown | Wird ausgelöst, wenn der Nutzer eine Taste drückt. Hält er die Taste gedrückt, feuert das Event wiederholt weiter. |
keypress | Wird ausgelöst, wenn der Nutzer eine Taste drückt, die ein Zeichen auf dem Bildschirm erzeugt. Bei den Pfeiltasten feuert dieses Event zum Beispiel nicht, keydown dagegen schon. Hält der Nutzer eine Taste gedrückt, wiederholt sich das Event wie bei keydown. |
keyup | Wird ausgelöst, wenn der Nutzer eine Taste loslässt. keydown und keypress feuern, bevor ein Zeichen auf dem Bildschirm erscheint, keyup dagegen danach. |
Herausfinden, welche Taste gedrückt wurde
Über das Event-Objekt findest du mit e.keycode heraus, welche Taste gedrückt wurde: Es liefert den ASCII-Code der Taste zurück.
Formular
| Event | Beschreibung |
|---|---|
submit | Wird ausgelöst, wenn der Nutzer den Absende-Button des Formulars drückt. |
change | Wird ausgelöst, wenn sich der Zustand bestimmter Formularelemente ändert. ( radio, checkbox und select ) |
