| <html id="HTML"> |
| <body id="Body"> |
| |
| <p>This tests the target, currentEvent, and phase of a complete trace through event bubbling and capture.</p> |
| <pre id="console"></pre> |
| |
| <br> |
| <div id="Parent" style="background-color:lightblue;border:1px solid #000000; padding: 10px; margin: 10px;"> |
| Parent |
| <div id="Self" style="background-color:blue; border:1px solid black; padding: 10px; margin: 10px;"> |
| Self |
| </div> |
| </div> |
| |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| function log(msg) |
| { |
| document.getElementById('console').appendChild(document.createTextNode(msg + "\n")); |
| } |
| |
| function traceEvent(event) |
| { |
| function targetString(target) |
| { |
| if (!target) |
| return "No Target"; |
| if (target instanceof window.Element) |
| return target.toString() + " (ID: " + target.id + ")"; |
| return target.toString(); |
| } |
| |
| function phaseString(eventPhase) |
| { |
| if (eventPhase == Event.NONE) |
| return "NONE"; |
| else if (eventPhase == Event.CAPTURING_PHASE) |
| return "CAPTURE"; |
| else if (eventPhase == Event.BUBBLING_PHASE) |
| return "BUBBLE"; |
| else if (eventPhase == Event.AT_TARGET) |
| return "AT TARGET"; |
| } |
| |
| var target = targetString(event.target); |
| var currentTarget = targetString(event.currentTarget); |
| var phase = phaseString(event.eventPhase); |
| |
| log("Target = " + target + "; Phase = " + phase + "; CurrentTarget = " + currentTarget + ";"); |
| } |
| |
| |
| window.addEventListener("customevent", traceEvent, true); |
| document.addEventListener("customevent", traceEvent, true); |
| document.getElementById("HTML").addEventListener("customevent", traceEvent, true); |
| document.getElementById("Body").addEventListener("customevent", traceEvent, true); |
| document.getElementById("Parent").addEventListener("customevent", traceEvent, true); |
| document.getElementById("Self").addEventListener("customevent", traceEvent, true); |
| |
| window.addEventListener("customevent", traceEvent, false); |
| document.addEventListener("customevent", traceEvent, false); |
| document.getElementById("HTML").addEventListener("customevent", traceEvent, false); |
| document.getElementById("Body").addEventListener("customevent", traceEvent, false); |
| document.getElementById("Parent").addEventListener("customevent", traceEvent, false); |
| document.getElementById("Self").addEventListener("customevent", traceEvent, false); |
| |
| var theEvent = document.createEvent("Event"); |
| theEvent.initEvent("customevent", true, true); |
| |
| // Trace before dispatch. |
| traceEvent(theEvent); |
| |
| document.getElementById("Self").dispatchEvent(theEvent); |
| </script> |
| </body> |
| </html> |
