Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Event Bubbling other Way</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>
</div>

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

for (var i = 0; i < divElements.length; i++){
  divElements[i].onclick = function(){
   this.style.borderColor = 'red';
    alert(this.getAttribute("id") + "border color changed");
  }
}
</script>


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