Test W3C DOM2 Events
1) Add load listener to window
You should see "Window fully loaded" to the right when the window loads.
2) Add listeners on load
The following elements should all have event listeners, assigned automatically when the window loads. See feedback to the right.
3) Add listener on demand
Click the first button to add a mouseover event listener to the second button.
4) Remove listener
Click the button below to remove the event listener from the second button in the last test.
5) Event Capturing
Each of the areas below has a click event listener set for the capturing phase (when the event is moving down through the DOM tree). When you click the innermost area (note that due to an IE quirk you have to click the text), the areas should handle the event from outer to inner.
Event Phases: 1 = capturing phase; 2 = at target; 3 = bubbling phase.
6) Event Bubbling
Each of the areas below has a click event listener set for the bubbling phase (when the event is moving up through the DOM tree). When you click the innermost area (note that due to an IE quirk you have to click the text), the areas should handle the event from inner to outer.
Event Phases: 1 = capturing phase; 2 = at target; 3 = bubbling phase.
7) stopPropagation()
This is exactly the same as the bubbling test above, except that each area's event handler calls Event.stopPropagation() so the event will not continue to the other areas.
8) preventDefault()
Click the buttons to add/remove a listener on the link below. When the listener is added, the event's default action should be ignored, and you should not get the alert.
9) Fire event elsewhere on demand
The second button listens for mouseover events. Click the first button to manually create and dispatch a mouseover event, and see that it works with both an "onmouseover" attribute and a DOM event listener.
10) Fire custom event on demand
The second button below listens for a custom "thisisnotarealevent" event. The first button creates a custom event of that type and dispatches it to the second.
11) Add listener to DOM-created element
Click the button below to add a new element via the DOM with a mouseover event listener attached.
12) Listeners on document and window
The "document" and "window" objects are not normal elements, but still can register event listeners. Click the buttons below to add/remove event listeners on document and window.
13) "return false" in HTML event attributes
This link should show a Javascript alert.
This link should not show a Javascript alert.
14) "this" in HTML event attributes
15) Reusing Event object
This test is identical to Test 10, except that the same Event object is used every time. This tests that the Event object is properly reset each time it is dispatched.
16) Mouse events on window
This tests that mouse event listeners can be successfully set on the window object. (In IE, mouse events natively fire on document but not on window.)
17) Event.bubbles
Both Area 1 and Area 2 below have capturing and bubbling listeners set for a custom event. The two buttons create and dispatch events of that type on Area 2. The first button creates an event with bubbles=true so all listeners should fire; the second button creates an event with bubbles=false so all but the bubbling listener on Area 1 (the last one) should fire.
18) Objects implementing EventListener interface
The button below has a click listener that was attached by passing a JavaScript object as the addEventListener method's second argument. That object implements the DOM2 EventListener interface since it has a .handleEvent(event) method which gets executed.
19) Objects implementing EventListener interface
The button below is disabled, so the "click" listener attached to it should not fire.