Event Delegation Example

In this YDN-JavaScript post, prizeloop asks whether "event delegation" — the use of a single event listener on a parent object to listen for events happening on its children (or deeper descendants) — works for mousemove events as well as, say, click events. This example illustrates the use of event delegation on both click and mouseover events.

We'll start with some structural markup — a div containing a ul with n li children.

<div id="container">
	<ul id="list">
		<li id="li-1">List Item 1</li>
		<li id="li-2">List Item 2</li>
		<li id="li-3">List Item 3</li>
		<li id="li-4">List Item 4</li>
		<li id="li-5">List Item 5</li>
		<li id="li-6">List Item 6</li>
	</ul>
</div>

We'll use the YUI Logger Control as the reporting mechanism for our event handlers, so this example begins its script by creating a LogReader instance and rendering it into the document body on pageload:

//create log reader instance on pageload
function loggerInit() {
	var myLogReader = new YAHOO.widget.LogReader();
}
//on is an alias for addListener
YAHOO.util.Event.on(window, "load", loggerInit);

Now we'll add an event handler to the container div, listening for any clicks in that div's bounds. We're only really interested in clicks on li's, though; when we get one of those, we'll write out a message to the Logger.

function clickHandler(e) {
	//get the resolved (non-text node) target:
	var elTarget = YAHOO.util.Event.getTarget(e);	
	//walk up the DOM tree looking for an <li>
	//in the target's ancestry; desist when you
	//reach the container div
	while (elTarget.id != "container") {
		//are you an li?
		if(elTarget.nodeName == "LI") {
			//yes, an li: so write out a message to the log
			YAHOO.log("The clicked li had an id of " + elTarget.id, "info", "clickExample");
			//and then stop looking:
			break;
		} else {
			//wasn't the container, but wasn't an li; so
			//let's step up the DOM and keep looking:
			elTarget = elTarget.parentNode;
		}
	}
}
//attach clickHandler as a listener for any click on
//the container div:
YAHOO.util.Event.on("container", "click", clickHandler);

The same technique works for the mousemove event as well. We'll substitute mousemove for click, but make no other substantive changes:

function mouseHandler(e) {	
	var elTarget = YAHOO.util.Event.getTarget(e);	
	while (elTarget.id != "container") {
		if(elTarget.nodeName == "LI") {
			YAHOO.log("The li that was mousedover had an id of " + elTarget.id, "info", "mouseExample");
			break;
		} else {
			elTarget = elTarget.parentNode;
		}
	}
}
YAHOO.util.Event.on("container", "mouseover", mouseHandler);

In this example, we've used two event listeners with their associated memory and performance load to serve as delegates for the same two events on six list items. Instead of 12 event listeners, we now have two. And the code works regardless of the number of li's used. In a more complicated page context, it's easy to see how this technique can dramatically reduce the number of event listeners required and thereby improve the performance of your application.

— Eric Miraglia, Yahoo Presentation Platform Engineering