event-trace.html | Explore in Territory

<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>
chromium/third_party/blink/web_tests/fast/events/event-trace.html
