events phase in browser

by Vladymyr Shevchuk

HTML

<!--  -->
<div id="red">
  <div id="orange">
    <div id="blue">&nbsp;</div>
  </div>
</div>

CSS

#red {
  width: 200px;
  height: 200px;
  padding: 40px;
  background: red;
  box-sizing: border-box;
}

#orange { 
  height: 100%;
  padding: 40px;
  background: orange;
  box-sizing: border-box;
}

#blue { 
  height: 100%;
  background: blue;
}

JavaScript

/* js */
red.addEventListener('click', () => console.log('red'));

orange.addEventListener('click', () => console.log('orange'));

blue.addEventListener('click', () => console.log('blue'));