Event delegation is a common practice where by you attach an event listener to a parent object to monitor its children rather than attach events to all the children. It’s far more efficient when you have numerous items on a page that you want to interact with.

The examples below should give you a better idea how awesome it is.

The Problem

Say you have A LOT of anchors and you want to add a click event to them. Normally you’d do this in several ways:

1
2
3
4
5
6
7
8
9
10
11
12

// First method
var links = $$('a.link');
links.each(function(link){
    link.addEvent('click', function(){
        //Do this stuff
    });
});
 
// Second method
$$('a.link').addEvent('click', function(){
    //Do this stuff
});

This is all fine but it’s not very efficient. You end up looping through all the anchors to add the event.

The Solution

With Event.Delegate you can attach an event to the parent, and have it handle everything. I’m going to use the example from Aaron’s post with a small addition to what I have above.

1
2
3
4
5
6

//Parent element handles the delegation, and here it's document.body
document.body.delegate('click', 'a.link', function(e){
    //Just like addEvent, you can pass in the event and stop it.
    e.stop();
    alert('you clicked a link!');
});

Conclusion

I really like Event Delegation. I’m really curious how fast it is though. Time to do a couple console.profile() to log the times.

I didn’t understand this part of his post:

Finally, you can pass in a function of your own. If your function returns true, then your method will fire. Note that the element passed to your method is not extended by MooTools yet for efficiency. You should avoid extending it yourself (by passing it through $) as this will affect performance. Instead, use the static methods on Element.

It confused me. I thought he was talking about the third argument, until he mentioned it’s a function that returns true. Passing in a function as a test looks something like:

1
2
3
4
5
6
7
8
9

//My test function
var testFunc = function(target){
    return target.match('a.link')
}
 
document.body.delegate('click', testFunc, function(e){
    e.stop();
    alert('you clicked a link!');
});

Thanks for writing about this Aaron. It’s a really great addition.