home > yui > demos

Event Delegation

Events are a fundamental part of any JS programmers code. However, event delegation can often be overlooked and is a powerful concept once understood. YUI makes event delegation incredibly easy for us to begin implementing in our code. Let's take a look.

Demo

Below is a typical unordered list. For simplicity sake I am subscribing my events to the <li> elements but you could just as easily have <a> elements or any number of other elements subscribed.

Before we begin we need to make sure 'node' or 'node-base' is included in the YUI Object.

YUI().use( 'node-base' ...
Now I am ready to go ahead and subscribe an event handler to my <li> elements. Once again this incredibly simple since we can use selector syntax that will target all of our li elements.
Y.on( 'click', function() { // Do stuff here }, '#list-1 li' );
Now that we've subscribed our handlers you can go ahead and click on the list items below. In the output window you will see the list item that you clicked and its currentTarget. Why is currentTarget noteworthy? Keep on reading.
  • Sample List Item #1
  • Sample List Item #2
  • Sample List Item #3
  • Sample List Item #4
  • Sample List Item #5

ul#list-1 output


Ok so now we've seen how to attach event handlers to our list items but for a moment lets pretend that this is the subnavigation area of website. We could potentially have a good number of links in this area not to mention links that may get added as the site grows. This is where event delegation comes into play. Instead of attaching our event handler to the <li> elements directly we attach it to its parent and let the <li> events bubble upwards. If you are not familiar with this concept, not to worry, it sounds much more complex than it really is.

First things first, let's add the event delegation module to our YUI object.

YUI().use( 'node-base', 'event-delegate' ...
Now that we've done that we can go ahead and create our event delegate. We do this by simply calling the Y.delegate method.
Y.delegate( 'click', function(e) { // Do stuff here }, '#list-2', 'li' );
So you'll notice that it looks similar to what we did above, however, we passed in the id of our parent element and separately we passed in the element that we wanted to catch the events for. So go ahead and click on the events and you will see how the currentTarget comes into play.

  • Sample List Item #1
  • Sample List Item #2
  • Sample List Item #3
  • Sample List Item #4
  • Sample List Item #5

ul#list-2 output

So now instead of having 5 different event handlers we have only the one that catches all the events for its specified children. As you can imagine that as the number of event handlers grow for your scripts this can be a resource saver not to mention a much more efficient way of handling multiple events.

Code

YUI().use( 'dump', 'node-base', 'event-delegate', function(Y) {

	Y.on( 'click', function(e) {

		var html = 'Clicked: ' + this.get('innerHTML');

		Y.one( '#output .out' ).set( 'innerHTML', html + '
Event currentTarget: ' + Y.dump(e._event.currentTarget) );

	}, '#list-1 li' );

	Y.delegate( 'click', function(e) {

		var html = 'Clicked: ' + this.get('innerHTML');

		Y.one( '#output2 .out' ).set( 'innerHTML', html + '
Event currentTarget: ' + Y.dump(e._event.currentTarget) );

	}, '#list-2', 'li' );



})

Quicklinks

Contact