Event B&C

by Kumaresan S

HTML

<div id="contFalse">
    <div id="outer">
        <div id="middle">
          <div id="inner">  
          </div>    
        </div>    
      </div>
      <ol id="orderFalse">
        <li>bubble ...</li>
      </ol>
      <button type="button" id="clearButton">Clear</button>
</div>
<div id="contTrue">
     <div id="out2">
        <div id="mid2">
          <div id="in2">  
          </div>    
        </div>    
      </div>
      <ol id="orderTrue">
        <li>capture ...</li>
      </ol>
      <button type="button" id="clearB2">Clear</button>
  </div>

CSS

#contFalse, #contTrue {
  float:left;
  width: 50%;
}

#outer, #out2 {
  width: 200px;
  height: 200px;
  background-color: red;
}

#middle, #mid2 {
  width: 50%;
  height: 50%;
  background-color: green;
  position: relative;
  top: 25%;
  left: 25%;  
}

#inner, #in2 {
  width: 50%;
  height: 50%;
  background-color: blue;
  position: relative;
  top: 25%;
  left: 25%;  
}

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);
  
  document.getElementById("out2").addEventListener("click", outerDivClic2, true);
  document.getElementById("mid2").addEventListener("click", middleDivClic2, true);
  document.getElementById("in2").addEventListener("click", innerDivClic2, true);
  document.getElementById("clearB2").addEventListener("click", clearLis2); 


function outerDivClick () {
  appendText("outer div clicked");
}

function middleDivClick () {
  appendText("middle div clicked");
}

function innerDivClick () {
  appendText("inner div clicked");
}

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

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


function outerDivClic2 () {
  appendTex2("outer div clicked");
}

function middleDivClic2 () {
  appendTex2("middle div clicked");
}

function innerDivClic2 () {
  appendTex2("inner div clicked");
}
function appendTex2 (s) {
  var li = document.createElement("li");
  li.innerText = s;
  document.getElementById("orderTrue").appendChild(li);
}

function clearLis2() {
  var ol = document.createElement("ol");
  ol.id = "orderTrue";
  document.getElementById("contTrue").replaceChild(ol,document.getElementById("orderTrue"));
}