Event Capturing in Javascript

Event Capturing means on click event will work top to bottom. Same like falling ball.

–HTML

<div id="wrapper">
<div id="container" class="button">
<div class="button" id="child">Has Event</div>
<div class="button" id="other">No Event</div>
<p>Nothing</p>
</div>
</div>

–CSS

.button{
  border:1px solid #ccc;
  cursor:pointer;
}

–JS

var c = document.querySelector('#container');

c.addEventListener('click', function(){
  console.log('container clicked');
}, true);

var b = document.querySelector('#child');

c.addEventListener('click', function(){
  console.log('Has clicked');
}, true)

–Live Demo

Check Console.log()

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”OoZpWo” default_tab=”js,result” user=”pradeepanvi”]See the Pen Event Capturing in Javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]