Event.eventPhase.html (2543B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title> W3C DOM Level 2 Event Object Property: eventPhase </title> 5 <script type="text/javascript"> 6 var PassTest = function() 7 { 8 document.getElementById("testresult").firstChild.data = "PASS"; 9 } 10 11 var FailTest = function() 12 { 13 document.getElementById("testresult").firstChild.data = "FAIL"; 14 } 15 16 var EVENT = "dblclick"; 17 var TARGET, PARENT; 18 var ActualResult = []; 19 var ExpectResult = []; 20 21 window.onload = function() 22 { 23 try 24 { 25 TARGET = document.getElementById("target"); 26 PARENT = document.getElementById("parent"); 27 28 ExpectResult = ["[1]" + PARENT, "[2]" + TARGET, "[3]" + document.body]; 29 30 PARENT.addEventListener(EVENT, TestEvent, true); 31 PARENT.addEventListener(EVENT, TestEvent, false); 32 TARGET.addEventListener(EVENT, TestEvent, true); 33 TARGET.addEventListener(EVENT, TestEvent, false); 34 document.body.addEventListener(EVENT, TestEvent, false); 35 36 PARENT.removeEventListener(EVENT, TestEvent, false); 37 TARGET.removeEventListener(EVENT, TestEvent, true); 38 } 39 catch(ex) 40 { 41 FailTest(); 42 } 43 } 44 45 function TestEvent(evt) 46 { 47 ActualResult.push("[" + evt.eventPhase + "]" + evt.currentTarget); 48 49 if ((evt.eventPhase == 3) && (evt.currentTarget == document.body)) 50 { 51 if (ExpectResult.toString() == ActualResult.toString()) 52 { 53 PassTest(); 54 } 55 else 56 { 57 FailTest(); 58 } 59 } 60 } 61 </script> 62 </head> 63 <body> 64 <h4> 65 Test Description: 66 eventPhase is used to indicate which phase of event flow is currently being accomplished. 67 </h4> 68 69 <div id="parent"> 70 Double click here: <input id="target" /> 71 </div> 72 73 <p>Test passes if the word "PASS" appears below after double clicking the above textbox.</p> 74 <div>Test result: </div> 75 <div id='testresult'>FAIL</div> 76 </body> 77 </html>