JSFiddle - React, Tailwind, and code Playground

by Wentz Wu

HTML

<div id="parent" style="width: 100px; height: 100px; background: red;">
        <button id="run" style="margin: 5px;">child button</button><br />
        <a href="http://nlabs.wordpress.com" target="_blank" style="display: block; border: 1px solid; background: silver; padding: 5px; margin: 5px;">child link</a>
    </div>
    <div style="margin-top: 10px;">
        <label for="useCapture">useCapture (top-down event flows):</label><input id="useCapture" type="checkbox" />
    </div>

JavaScript

//http://www.w3schools.com/jsref/dom_obj_event.asp
//http://api.jquery.com/category/events/event-handler-attachment/
var useCapture = document.getElementById("useCapture");

var p = document.getElementById("parent");
p.addEventListener("click", f1, useCapture.checked);

var r = document.getElementById("run");
r.addEventListener("click", f2, useCapture.checked);

useCapture.addEventListener("click", function(e) {
    p.removeEventListener("click", f1, !useCapture.checked);
    r.removeEventListener("click", f2, !useCapture.checked);

    p.addEventListener("click", f1, useCapture.checked);
    r.addEventListener("click", f2, useCapture.checked);

});

var a = document.querySelector("a");
a.addEventListener("click", function(e) {
    e.preventDefault();
    e.cancelBubble = true;
    //e.stopPropagation()
    alert("bubbles: " + e.bubbles + "\n" + "target: " + e.target + "\n\n" + "this: " + this);
});

function f2(e) {
    //e.stopPropagation();
    alert("bubbles: " + e.bubbles + "\n" + "target: " + e.target + "\n\n" + "this: " + this);

}

function f1(e) {
    alert("bubbles: " + e.bubbles + "\n" + "target: " + e.target + "\n\n" + "this: " + this);
}