event bubbling

30daysofjavascript

by Rajdeep Chandra

HTML

<div id="main">
  <div id="parent">
    <div id="child">
      child
    </div>
    <div id="other" class="button">
      other
  </div>
</div>

JavaScript

var  p = document.querySelector('#parent');

p.addEventListener('click', function(){
	console.log('parent clicked')
},true); // if you want to have the capturing phase enabled for the parent use true here

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

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