JavaScript/Event-Handler

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Event-Handler (Ereignisbehandler) sind ein wichtiges Bindeglied zwischen HTML und JavaScript. Event-Handler werden entweder in Form von Attributen in HTML-Tags notiert (siehe auch HTML/Eventhandler), besser aber mittels der Methode addEventListener hinzugefügt.

Animation-Events


Daten-Abruf-Events


Drag-und-Drop-Events


Druck-Events


Fenster-/Frame-Events


Formular-Events



Maus-Events


Medienwiedergaben-Events


Skalierbare Vektor Grafiken (SVG) -Events

  • onactivate (ausgelöst ↔ click)
  • onzoom (Dokument-Zoom-Stufe oder Aktueller Maßstab wird geändert)


Tastatur-Events


Touch-Events


Zwischenablage-Events


Inhaltsverzeichnis

[Bearbeiten] Allgemeines zu Event-Handlern

Jeder Event-Handler steht für ein bestimmtes Anwenderereignis, onclick etwa für das Ereignis "Anwender hat mit der Maus geklickt". Der Anzeigebereich des HTML-Elements, in dem der Event-Handler notiert ist, ist das auslösende Element. Wenn der Event-Handler onclick beispielsweise in einem Formular-Button notiert wird, wird der damit verknüpfte JavaScript-Code nur dann ausgeführt, wenn der Mausklick im Anzeigebereich dieses Elements erfolgt.

[Bearbeiten] Einbindung

[Bearbeiten] HTML-Attribute

Event-Handler erkennen Sie daran, dass solche HTML-Attribute immer mit on[...] beginnen, zum Beispiel onclick. Hinter dem Istgleichzeichen notieren Sie eine in Anführungszeichen gesetzte JavaScript-Anweisung. Wenn Sie mehrere Anweisungen ausführen wollen, dann definieren Sie sich dazu am besten in einem JavaScript-Bereich eine Funktion und rufen hinter dem Istgleichzeichen diese Funktion auf, also z.B. onclick="Umrechnen()".


[Bearbeiten] Event-Handler dynamisch einfügen und entfernen

Mit dieser integrierten Helferfunktion können sie problemlos Event-Handler dynamisch einfügen und wieder entfernen. Im Script wird attachEvent() aufgerufen, wenn die Abfrage nach addEventListener false ergibt[1]:


function AddEvent(obj,type,fn) {                 // Helferfunktion für alle Browser
  if (obj.addEventListener)
    obj.addEventListener (type,fn,false);
  else if (obj.attachEvent)
    obj.attachEvent ('on'+type,fn);
}
 
function RemoveEvent(obj,type,fn) {              // Helferfunktion für alle Browser
  if (obj.removeEventListener)
    obj.removeEventListener (type,fn,false);
  else if (obj.detachEvent)
    obj.detachEvent ('on'+type,fn);
}


[Bearbeiten] Quellen

  1. http://molily.de/js/event-handling-fortgeschritten.html#dom-events molily fortgeschrittenes Event-Handling (von Matthias Schäfer)
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Hilfe
SELFHTML
Diverses
Werkzeuge
Flattr
Soziale Netzwerke