Event Bubbling in JavaScript

Event Bubbling means on click event will work bottom to top. Same like bubbles goes.

–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;
}

–jQuery

$('#container').click(function(){
  console.log('container clicked');
})

$('#child').click(function(){
  console.log('Has clicked');
})

–Live Demo

Check Console.log()

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