<!DOCTYPE HTML> <html> <head> <title> W3C DOM Level 2 Event Object Property: eventPhase </title> <script type="text/javascript"> var PassTest = function() { document.getElementById("testresult").firstChild.data = "PASS"; } var FailTest = function() { document.getElementById("testresult").firstChild.data = "FAIL"; } var EVENT = "dblclick"; var TARGET, PARENT; var ActualResult = []; var ExpectResult = []; window.onload = function() { try { TARGET = document.getElementById("target"); PARENT = document.getElementById("parent"); ExpectResult = ["[1]" + PARENT, "[2]" + TARGET, "[3]" + document.body]; PARENT.addEventListener(EVENT, TestEvent, true); PARENT.addEventListener(EVENT, TestEvent, false); TARGET.addEventListener(EVENT, TestEvent, true); TARGET.addEventListener(EVENT, TestEvent, false); document.body.addEventListener(EVENT, TestEvent, false); PARENT.removeEventListener(EVENT, TestEvent, false); TARGET.removeEventListener(EVENT, TestEvent, true); } catch(ex) { FailTest(); } } function TestEvent(evt) { ActualResult.push("[" + evt.eventPhase + "]" + evt.currentTarget); if ((evt.eventPhase == 3) && (evt.currentTarget == document.body)) { if (ExpectResult.toString() == ActualResult.toString()) { PassTest(); } else { FailTest(); } } } </script> </head> <body> <h4> Test Description: eventPhase is used to indicate which phase of event flow is currently being accomplished. </h4> <div id="parent"> Double click here: <input id="target" /> </div> <p>Test passes if the word "PASS" appears below after double clicking the above textbox.</p> <div>Test result: </div> <div id='testresult'>FAIL</div> </body> </html>