Für die Registrierung von Event-Handlern gibt es browserabhängige, inkompatible Modelle, wie z.B. inline, traditional, firmespezifische Lösungen und W3C. Hier wird vorrangig das Modell von W3C: UI-Events , Mozilla: Web-API-Event , Whatwg: DOM-Event , W3C: Overview of the DOM Level 2 Event Model betrachtet.
Auf ein HTML-Element kann nur dann zugegriffen werden, wenn es geladen ist.
window.onload wird aufgerufen (sytemgeneriertes Ereignis), wenn eine Seite fertig geladen ist.
Siehe z.B. w3schools
HTML Event Attributes
.
Beispiele für window-Events:
onafterprint,
onbeforeprint,
onbeforeunload,
onerror,
onhaschange,
onload,
onmessage,
onoffline,
ononline,
onpagehide,
onpageshow,
onpopstate,
onredo,
onresize,
onstorage,
onundo,
onunload
Beispiele für form-Events:
onblur,
onchange,
oncontextmenu,
onfocus,
onformchange,
onforminput,
oninput,
oninvalid,
onselect,
onsubmit
Für EventListeners kann verwendet werden:
if( window.addEventListener ) { window.addEventListener('load',handlerFunction,false);
} else if( document.addEventListener ) { document.addEventListener('load',handlerFunction,false);
}
onunload
Sollen fn1() und fn2() nach dem Laden einer Seite aufgerufen werden, so kann das window.onload - Ereignis verwendet werden.
window.onload = function() {
fn1();
fn2();
}
Um zu zeigen, wie obj.addEventListener / obj.attachEvent verwendet werden können, soll mit Hilfe der folgenden Funktion addEvent(obj, evType, fn) das onload - Ereignis in einer alternativen Art verwenden werden. Alternative:
function addEvent(obj, evType, fn){
var r;
if (obj.addEventListener) { // w3C
obj.addEventListener(evType, fn, false);
return true;
} else if (obj.attachEvent){ // IE < 9
r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}
function fn1() { return this; }
var fn2 = function() { return this; }
// Aufruf
addEvent(window, 'load', fn1);
addEvent(window, 'load', fn2);
Ein HTML-Element muß eine 'handleEvent'-Methode besitzen um Ereignisse (auf diesem Element) in einfachster Form zu behandeln. Solche Ereignisse sind z.B. 'abort', 'blur', 'change', 'focus', 'select', 'submit', 'click', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup'
Manche Elemente haben eine Default-Ereignis-Steuerung. Beispiele:
Zu Ereignisses gehören Targets, die meist zu einem DOM-Baum (z.B.XHTML-Nodes) gehören.
Die folgende Funktion dom erzeugt ein ECMAScript-Objekt, mit den Funktionen root und getElementsByAttribute. Infolge der Rekursivität können ab dem root-Knoten alle nodes durchlaufen und alle jene nodes aufgesammelt werden, die das gewünschte Attribut haben.
Test p-tag (#eeefff) mit span-tag (#fffeee)
W3C: HTML event types W3C: DOM-Level-2-Events (Interface MutationEvent )
DOM 2 Events berücksichtigen unterschiedliche Möglichkeiten, welches Element (und wie) auf Ereignisse reagieren können. Ein Element el muß eine 'handleEvent'-Methode besitzen. Für die Weitergabe von Ereignissen (Propagation von Methoden) dient die eventObject.eventPhase (Capture- und Bubble-Phase).
// W3C:
el.addEventListener('nameOfEvent', referenceToFunction, phase)
Hierbei ist die .eventPhase
0 für ein selbst erzeugtes Element, das noch nicht gefeuert hat
1 während der capture phase
2 während der bubble phase
3 während der bubble phase beim target-Element, das das Ereignis auslöste (ancestor)
Zu einem load events gehört lediglich eine capture phase
el.onclick = function () { alert('Element='+el.tagName() ); };
Wie werder Ereignisse weitergereicht?
Der folgende Code hält sich (überwiegend) an W3C. Dieser Code ist nicht voll funktionsfähig und dient lediglich zur Veranschaulichung der Capture- und Bubble-Phasen. In einem div-Element ist ein span-Element und in diesem ein a-Element, etwa
<div id="MYDIV"> <span id="MYSPAN"> <a href="/" id="MYA">Bitte hier Klicken</a> </span> </div>
if( document.implementation.hasFeature('MutationEvents','2.0') || window.MutationEvent ){...
function init_capture_bubble_test(todo) {
var div = document.getElementById('MYDIV'),
span = document.getElementById('MYSPAN'),
a = document.getElementById('MYA');
div.addEventListener('click', function (ev) {
alert('↓ div-Element capture phase '+info(ev)); }, true);
span.addEventListener('click', function (ev) {
alert('↓ span-Element capture phase '+info(ev)); }, true);
a.addEventListener('click', function (ev) {
alert('kein Standard: zusätzliche a-Element capture phase '+info(ev)); }, true);
a.addEventListener('click', function (ev) {
alert('↑ a-Element bubble phase (1. listener) '+info(ev)); }, false);
// a.addEventListener('click', function (ev) {
// alert('↑ a-Element bubble phase (2. listener) '+info(ev)); }, false);
// anstelle "return false": if(ev.cancellable){ev.preventDefault();}
span.addEventListener('click', function (ev) { alert('↑ span-Element bubble phase (3. listener) '+info(ev)); }, false);
if (todo === 'fired_once') {
a.addEventListener('click', function (ev) {
alert('a-Element bubble (3. listener) fired once (this.removeEventListener(\'click\', arguments.callee, false) '+info(ev));
this.removeEventListener('click', arguments.callee, false);
// alternativ ev.target.removeEventListener(...)
}, false);
}
div.addEventListener('click', function (ev) {
alert('↑ div-Element phase (4. listener), keine weiteren Listener: ev.stopPropagation();'+ev);
//ev.stopPropagation();
}, false);
document.stopPropagation();
}
function get_target(ev) { var o, mr, d = document.documentElement, b = document.body,
ev = ev || window.event, t = ev.target || ev.srcElement, k = ev.keyCode || ev.which;
// Maus-Taste, Maus-Position
if (ev.button) { mr = 2 === e.button; } else if (ev.which) { mr = 3 === e.which; }
if ( ev.pageX == null && ev.clientX != null ) {
ev.pageX = e.clientX + (d && d.scrollLeft || b && b.scrollLeft || 0)
- (d && d.clientLeft || b && b.clientLeft || 0);
ev.pageY = ev.clientY + (d && d.scrollTop || b && b.scrollTop || 0)
- (d && d.clientTop || b && b.clientTop || 0);
}
if (t && (ev.target.nodeType === 3 || ev.target.nodeType === 4)) { t = t.parentNode; }
o = { ev: ev, el: t, keycode: k, char: String.fromCharCode(k),
mouse_r: mr, x: ev.pageX, y: ev.pageY};
return o;
}
function info(ev) { var ev = ev || window.event, s =
"\n ev.currentTarget.nodeName="+ev.currentTarget.nodeName +
"\n ev.currentTarget.nodeType="+ev.currentTarget.nodeType +
"\n ev.target.nodeName="+ev.target.nodeName +
"\n ev.target.nodeType="+ev.target.nodeType+
"\n MS ev.srcElement.nodeName=" + ev.srcElement.nodeName +
"\n MS ev.srcElement.nodeType=" + ev.srcElement.nodeType;
"\n ev.cancelable="+ev.cancelable+
"\n document.implementation.hasFeature(\'MutationEvents\',\'2.0\') || window.MutationEvent="+document.implementation.hasFeature('MutationEvents','2.0') || window.MutationEvent;
return s;
}
Nach W3C wird das Event-Objekt an den Handler weiter gegeben. Hinweis: preventDefault() oder stopPropagation() wirken sich auf die aktuelle Event-Instanz aus. Der IE verwendet das global window.event-Objekt.
Die folgenden Tabellen basieren auf Zusammenstellungen von Mike Hall (siehe http://brainjar.com/dhtml/events/default4.asp). Es werden nicht alle Properties angegeben. Es fehlen z.B. Mauskoordinaten, Tastencode, usw.
| W3C Event model Event Properties and Methods | |
|---|---|
| bubbles | A Boolean value indicating whether or not the event bubbles. |
| cancelable | A Boolean value indicating whether or not the event can be canceled. |
| currentTarget | The node that this event handler is assigned to. |
| eventPhase | An integer value indicating which phase of the event flow this event is being processed in. One of CAPTURING_PHASE (1), AT_TARGET (2) or BUBBLING_PHASE (3). |
| target | The node that the event originated from. |
| timeStamp | The time the event occurred. |
| type | A string indicating the type of event, such as "mouseover", "click", etc. |
| W3C event | IE window.event | Notes | |
|---|---|---|---|
| currentTarget | none | ||
| target | srcElement | The node that the event originated from. | See below. |
| eventPhase | none | Not applicable in IE. | |
| timeStamp | none | Not available in IE. | |
| type | type | Equivalent to the standard. | |
| preventDefault() | returnValue | Set to false to cancel any default action for the event. | |
| stopPropagation() | cancelBubble | Set to true to prevent the event from bubbling. |
Die Funktionen do_ev1(ev) bzw. do_ev2(ev), die bei einem
'mouseover'- bzw. 'mouseup'-Ereignis ausgeführt werden, sehen etwa so aus:
Teste: 'mouseover', 'mouseup'
Die Funktion fade_simple = function(node, ms) soll den Grünanteil 'gg'der Hintergrundfarbe zeitgesteuert (Closure) setzen: gg = '00', '11', '22', '33', '44', '55', '66', '77', '88', '99', 'aa', 'bb', 'cc', 'dd', 'ee', 'ff'.
Hier ist die Ausführung der Funktion fade_simple(document.getElementById('FADE_SIMPLE')): Test
Dies ist eine Erweiterung des vorherigen Beispieles, wobei die inneren Hilfsfunktionen r_g_b_from(col) und function hex_from(dez) verwendet werden.
Hier ist die Ausführung der Funktion fade(document.body): Test
Mit der folgenden Funktion add_handlers_to sollen DOM-Elementen eines Array's jeweils einige CSS-Attribute und ein onclick-Ereignis hinzu gefügt werden.
Wichtig ist, dass die Handlerfunktion nicht an die Variable i, sondern an den Wert von i beim Click-Ereignis gebunden wird.
Lösung: Es wird eine Funktion = function (i) {...}(i) definiert, die sofort mit i aufgerufen wird. Dadurch wird eine Eventhandler-Funktion zurück gegeben, die an den übergebenen Wert von i gebunden ist (und nicht an add_handlers_to). Diese zurück gegebene Funktion wird dann onclick zugewiesen.
Zum Testen bitte auf die id's klicken. id0 id1 id2