rik/event_delegation.html

## event_delegation.html
<!DOCTYPE html>
<html>
<head><title>Event delegation</title></head>
<body>
<ul>
 <li><a href="#a"><span>a</span></a></li>
 <li><a href="#b"><span><span>b</span></span></a></li>
 <li><a href="#c"><span><span><span>c</span></span></span></a></li>
</ul>
<script>
document.getElementsByTagName("ul")[0].addEventListener("click", function(event) {
    var root = event.currentTarget;
    var node = event.target;
    while (node != root) {
        if (node.nodeName.toLowerCase() === "a") {
            var target = node;
            break;
        }
        node = node.parentNode;
    }
    if(!target)
        return;
    alert(target.getAttribute("href").substring(1));
    event.stopPropagation();
    event.preventDefault();
}, false);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head><title>Event delegation</title></head>
	<body>
	<ul>
	<li><a href="#a"><span>a</span></a></li>
	<li><a href="#b"><span><span>b</span></span></a></li>
	<li><a href="#c"><span><span><span>c</span></span></span></a></li>
	</ul>
	<script>
	document.getElementsByTagName("ul")[0].addEventListener("click", function(event) {
	var root = event.currentTarget;
	var node = event.target;
	while (node != root) {
	if (node.nodeName.toLowerCase() === "a") {
	var target = node;
	break;
	}
	node = node.parentNode;
	}
	if(!target)
	return;
	alert(target.getAttribute("href").substring(1));
	event.stopPropagation();
	event.preventDefault();
	}, false);
	</script>
	</body>
	</html>