carly31
10/9/2017 - 5:21 AM

Event Delegation

Event delegation allows you to avoid adding event listeners to specific nodes;
instead, the event listener is added to one parent.

Source: https://davidwalsh.name/event-delegate

//Let's have a parent DIV with many children but 
//all we care about is an A tag with the classA CSS class:


// Get the parent DIV, add click listener...
document.getElementById("myDiv").addEventListener("click",function(e) {
	// e.target was the clicked element
  if (e.target && e.target.matches("a.classA")) {
    console.log("Anchor element clicked!");
	}
});
<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>

<script>
  // Get the element, add a click listener...
  document.getElementById("parent-list").addEventListener("click", function(e) {
	// e.target is the clicked element!
	// If it was a list item
	if(e.target && e.target.nodeName == "LI") {
		// List item found!  Output the ID!
		console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
	}
});
</script>