| Titel: | JavaScript Event-Listener | |
| Beschreibung: | Wie man in JavaScript durch Listener auf Ereignisse reagieren kann. | |
| Kategorie: | Programmierung | |
| Unterkategorie | JavaScript | |
| Benötigtes Fachwissen: | Fortgeschrittene Anfänger | |
| Artikel überarbeiten: | JavaScript Event-Listener | |
JavaScript Event-Listener
In JavaScript gibt es mehrere Möglichkeiten, um auf Events (wie MouseMove, MouseClick, etc.) zu reagieren.
Man kann Events natürlich direkt im Objekt (HTML-Tag), durch hinzufügen des entsprechenden Attributs abfragen.
etwa durch >>onMouseMove="alert('Hallo')"<<. JavaScript-Code hat aber eigentlich nichts im HTML-Code verloren. Wer also einen sauberen Programmierstil beibehalten möchte, sollte derartige Events dem Listener im entsprechenden extern liegenden JavaScript-Code zuweisen.
In diesem Artikel wird die Methode gezeigt, wie man ein Objekt dem Event-Listener übergeben kann um auf Events reagieren zu können.
Objekt einem Listener hinzufügen
Um ein Objekt (HTML-Tag wie Button input type="submit" ...) dem Listener hinzuzufügen, benötigt man
>>addEventListener()<< Für alle Browser außer Internet Explorer, oder
>>attachEvent()<< für den Microsoft Internet Explorer.
Bei der Definition des Events ist zu beachten, dass addEventListener() die Namen der Events in der Form click, mousemove, etc. ohne das Wort "on" verlangt.
Der Internet Explorer verlangt diese dagegen bei attachEvent() mit dem Wörtchen "on". Also heißen die Events hier onclick, onmousemove, etc.
Allgemeine Form
// Für Alle Browser wie Firefox, Opera, Netscape, Safari, Chrome // Außer Internet Explorer! Element.addEventListener("EventTyp", Fkt, wann); // Für Internet Explorer Element.attachEvent("EventTyp", Fkt);
Anzusprechendes Objekts.
Abfragen kann man dies etwa durch document.getElementById("TagID")
EventTyp
Bezeichnet das Event, bei welchem die Funktion mit dem Namen >>Fkt<< ausgeführt werden soll.
Fkt
Wenn das Event auftritt, wird die Funktion mit dem Namen >>Fkt<< ausgeführt.
wann
Dieser Boolsche-Wert gibt an ob:
true = die Funktion >>Fkt<< beim Hinweg durch die Verzeichnisstruktur ausgeführt werden soll, oder
false = die Funktion >>Fkt<< beim Rückweg durch die Verzeichnisstruktur ausgeführt werden soll.
Beispiel addEventListener() Für Alle Browser außer IE
// Event-Listener initialisieren function init() { var btn = document.getElementById("btn1"); btn.addEventListener("click", fktClick, true); } // Funktion die ausgeführt wird, wenn das Event eintritt. function fktClick(evt) { alert("Hallo!"); }
<input type="button" id="btn1" value="Button1" />
// Event-Listener initialisieren function init() { var btn = document.getElementById("btn1"); btn.attachEvent("onclick", fktClick); } // Funktion die ausgeführt wird, wenn das Event eintritt. function fktClick(evt) { alert("Hallo!"); }
<input type="button" id="btn1" value="Button1" />
Nachfolgend eine Liste der Events, für addEventListener() und attachEvent().
Hinweis:
Es wurden von mir nicht alle Events auf Funktionstüchtigkeit getestet, daher gibt es die Liste ohne Gewähr.
| Beschreibung | addEventListener() Alle Browser außer IE |
attachEvent() Internet Explorer |
| Abbruch beim Laden | abort | onabort |
| Verlust des Fokus | blur | onblur |
| Mausklick | click | onclick |
| Ändern eines Textes in einer Textbox | change | onchange |
| Drag&Drop-Operation | dragdrop | ondragdrop |
| JavaScript-Fehler | error | onerror |
| Erhalt des Fokus | focus | onfocus |
| Drücken einer Taste | keydown | onkeydown |
| Loslassen einer Taste | keyup | onkeyup |
| Vollständiges Laden | load | onload |
| Drücken der Maus | mousedown | onmousedown |
| Loslassen der Maus | mouseup | onmouseup |
| Mauszeiger verlässt Objekt | mouseout | onmouseout |
| Mauszeiger befindet sich über dem Objekt | mouseover | onmouseover |
| Masuzeiger bewegt sich über dem Objekt | mousemove | onmousemove |
| Zurücksetzen eines Formulars | reset | onreset |
| Ändern der Fenstergröße | resize | onresize |
| Auswählen eines Elements | select | onselect |
| Abschicken eines Formular | submit | onsubmit |
| Beim schließen des Fensters | unload | onunload |