Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Event Capturing addEventListener() and Event Bubbling</title>
<style id="jsbin-css">
.style{
display: table-cell;
border: 5px solid black;
padding: 20px;
text-align: center;
}


</style>
</head>
<body>
<div class="style" id="DIV1"> DIV 1
<div class="style" id="DIV2"> DIV 2
 <div class="style" id="DIV3"> DIV 3
</div>
</div>

    <script id="jsbin-javascript">
var divs = document.getElementsByTagName('div');

 for (var i = 0; i < divs.length; i++)
 {
   divs[i].addEventListener("click", clickHadler, true);
   divs[i].addEventListener("click", clickHadler, false);
 }


function clickHadler(event){

 alert(this.getAttribute("id") + "click event handled");
}

</script>


<script id="jsbin-source-css" type="text/css">.style{
display: table-cell;
border: 5px solid black;
padding: 20px;
text-align: center;
}


</script>

<script id="jsbin-source-javascript" type="text/javascript">var divs = document.getElementsByTagName('div');

 for (var i = 0; i < divs.length; i++)
 {
   divs[i].addEventListener("click", clickHadler, true);
   divs[i].addEventListener("click", clickHadler, false);
 }


function clickHadler(event){

 alert(this.getAttribute("id") + "click event handled");
}
</script></body>
</html>