Edit in JSFiddle

var h4 = document.querySelector('h4'),
	ul = document.querySelector('ul');

// 부모 요소에서 자식들의 이벤트 처리를 위임 받음
ul.addEventListener('click', function(e){
	if(e.target.tagName == "LI") {
		var index = parseInt(e.target.getAttribute('index')),
			value = e.target.getAttribute('data-value');

		h4.textContent = 'Item '+index+' has value '+value;

		if (index % 2 == 0) {
			h4.style.backgroundColor = 'yellow';
		} else {
			h4.style.backgroundColor = 'white';
		}
	}
});
<h4>Click below items</h4>
<ul>
	<li index="1" data-value="a">list item 1</li>
	<li index="2" data-value="b">list item 2</li>
	<li index="3" data-value="c">list item 3</li>
	<li index="4" data-value="d">list item 4</li>
	<li index="5" data-value="e">list item 5</li>
</ul>

<style>
* {font-size: 1.5rem;}
</style>