event-children-chain

by Nic Fontaine

HTML

<section>
<article>
<div>  
</div>
<div>
</div>
</article>
</section>

CSS

section {
  padding: 100px;
  background: teal;
}

article {
  background: yellow;
}

div {
  background: purple;
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}

JavaScript

document.getElementsByTagName('section')[0].addEventListener('click', function() {
	alert('body click')
},false)


var d = document.getElementsByTagName('div')
for (var i=0; i<d.length; i++) {
	(function(index) {
		d[index].addEventListener('click', function(e) {
			e.stopPropagation()
      alert('div click')
		})
  })(i)
}