Event delegation in a nutshell is assigning a single event listener to the parent element of a group of event targets.

A standard example of this would be a site navigation. Say we want to know whenever a link in this item has been clicked. We could do $(‘nav a’).click(function(){ //Do something with click }); Which ultimately assigns an event listener to each of the links in that nav.

While this is perfectly valid and will work there is a more expansible, intelligent and efficient way of doing this. One may assign a single event listener to a parent element. This allows for greater usability and expansibility. So for example if one wants to add more elements to the navigation dynamically under the parent being as the event listener is on the parent the new elements event will still be caught. If an event listener was listening to all of the a tags at the time the event handler was created and then a new a tag was generated dynamically the event handler would not catch an event by any new a tags. So by adding the event handler the parent of any DOM manipulations/additions and looking for what the target of the event was one can delegate the click event.

An example may be a more clear depiction of what is meant:

<!DOCTYPE html>
<head>
	<title>Example by Stephen Tvedt</title>	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$('nav').on('click', 'a', function(e){ 
			var $target = $(e.target);
			$target.addClass('highlight');
		});	
	});
	</script>
	<style>
		nav a {
			display:block;
			clear:right;
			width:20px;
			text-align:center;
		}
		.highlight{
			background-color:orange;
		}
	</style>
</head>
<body>
	<nav>
		<a href="#">1</a>
		<a href="#">2</a>
		<a href="#”>3</a>
		<a href="#">4</a>
	</nav>
			
</body>