• Software
• Seitenartikel

JavaScript Event-Listener

Wie man in JavaScript durch Listener auf Ereignisse reagieren kann.

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

// 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" />