delegation event model in JavaScript

Let's say that we have a parent UL element with several child elements:
```
<ul id="parent-list">
	<li id="post-1">Item 1</li>
	<li id="post-2">Item 2</li>
	<li id="post-3">Item 3</li>
	<li id="post-4">Item 4</li>
	<li id="post-5">Item 5</li>
	<li id="post-6">Item 6</li>
</ul>
```
To listen when each child element is clicked,  we could add a separate event listener to each individual LI element, but a better solution is to add an event listener to the parent UL element.  When the event bubbles up to the UL element, you check the event object's target property to gain a reference to the actual clicked node.  
```
/ Get the element, add a click listener...
document.getElementById("parent-list").addEventListener("click", function(e) {
	// e.target is the clicked element!
	if(e.target && e.target.nodeName == "LI") {
		// List item found!  Output the ID!
		console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
	}
});
```
Home