Declaring and handling bubbled events

by isogunro

HTML

<div id="bod">
<div id="outer">
    <div id="middle">
        <div id="inner">            
        </div>
    </div>
</div>
<ol id="eventOrder"></ol>
<button type="button" id="clearButton">Clear</button>
</div>

CSS

#outer {
    width: 200px;
    height: 200px;
    background-color:red;
}
#middle {
    width: 50%;
    height: 50%;
    position:relative;
    top: 25%;
    left: 25%;
    background-color: green;
}
#inner {
    width: 50%;
    height: 50%;
    position:relative;
    top: 25%;
    left: 25%;
    background-color: blue;    
}

JavaScript

document.getElementById("outer").addEventListener("click", outerDivClick, false);
    document.getElementById("middle").addEventListener("click", middleDivClick, false);
    document.getElementById("inner").addEventListener("click", innerDivClick, false);
    document.getElementById("clearButton").addEventListener("click", clearList);

function outerDivClick() {
     appendText("Outer Div Clicked");
}

function innerDivClick() {
     appendText("Inner Div Clicked");   
    //window.event.cancelBubble = true;
}

function appendText(s) {
     var li = document.createElement("li");
    li.innerText = s;
    document.getElementById("eventOrder").appendChild(li);
}

function clearList() {
     var ol= document.createElement("ol");
    ol.id = "eventOrder";
    document.getElementById("bod").replaceChild(ol, document.getElementById("eventOrder"));
}

function middleDivClick() {
     appendText("middle Div Clicked");   
}