Edit in JSFiddle

Troy's Event Capture/Bubble Demo<br>
<div id="outer">
   <div id="inner">
    
   </div> 
</div>
<div id="log" onclick="this.innerHTML=null"></div>

//by Troy Whorten 4/2/2014

var red = document.getElementById("inner");
var blue = document.getElementById("outer");


red.addEventListener("click",function () {log("red true");}, true);
red.addEventListener("click",function () {log("red false");}, false);
blue.addEventListener("click",function () {log("blue false");}, false);
blue.addEventListener("click",function () {log("blue true");}, true);

function log(str) {
    logel = document.getElementById("log");
    logln = document.createElement("span");
    logbr = document.createElement("br");
    logln.innerHTML = str;
    logel.appendChild(logln);
    logel.appendChild(logbr);
}

div {
display: inline-block;
    vertical-align: top;
}

#log {
    width: 100px;
    border: 1px dotted black;
}

#outer
{
    height: 100px;
    width: 100px;
    background: blue;
    position: relative;
}

#inner
{
    height: 40px;
    width: 40px;
    position: absolute;
    top: 30px;
    left: 30px;
    background: red;
}