Propagation

by Julien Etienne

HTML

<div class="three">three
   <div class="two">two
     <div class="one">one
         <div class="zero">zero</div>
      </div>
   </div>
</div>

CSS

.three{
  width: 200px;
  height: 200px;
  background: red;
}
.two{
  width: 150px;
  height: 150px;
  background: lime;
}
.one{
  width: 100px;
  height: 100px;
  background: yellow;
}
.zero{
  width: 50px;
  height: 50px;
  background: blue;
}

JavaScript

var three = document.querySelector('.three');
var two = document.querySelector('.two');
var one = document.querySelector('.one');
var zero = document.querySelector('.zero');

three.addEventListener('click',threefn,true);
two.addEventListener('click',twofn,true);
one.addEventListener('click',onefn,true);
zero.addEventListener('click',zerofn,true);

function zerofn(e){
var target = e.target;
 console.log('zero','this?',this);
 console.log('zero','target?',target);
 e.stopPropagation();
}

function onefn(e){
var target = e.target;
 console.log('one','this?',this);
 console.log('one','target?',target);
 e.stopPropagation();
}

function twofn(e){
var target = e.target;
 console.log('two','this?',this);
 console.log('two','target?',target);
 e.stopPropagation();
}

function threefn(e){
var target = e.target;
 console.log('three','this?',this);
 console.log('three','target?',target);
 e.stopPropagation();
}