<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>