Event Delegation in jQuery 1.4

Question

I've got the following code:

$("ul.relatedAlbums li").hover(function(){
    $(this).css({fontWeight:"bold"});
},
function(){
    $(this).css({fontWeight:"normal"});
});

I've heard good things about event delegation and speed performance. Using jQuery's delegate method, I imagine it would go something like:

$("ul.relatedAlbums").delegate("li", "hover", function(){
    $(this).css({fontWeight:"bold"});
},
function(){
    $(this).css({fontWeight:"normal"});
});

But reading the documentation, it says that this method is like using the live event. And I had always understood using the live event to be inefficient. So, could someone out there enlighten me on the best practices for this?

Answer 1

Just to point out, .delegate() actually uses .live() internally at present and to depricate .live() would mean some framework effort.

Unless you are adding elements to your page dynamically, you can use it as your first example. .live() and .delegate come into play when you have an interactive page where you are making changes to the elements contained therein.

EDIT: to the downvoters: From the jQuery forum: http://forum.jquery.com/topic/depreciating-live citing THIS code:

delegate: function( selector, types, data, fn ) { return this.live( types, data, fn, selector ); },

My point being that a specific selector will limit the events if it is appropriate and just selecting .delegate() is not always best and there is no global "always do this". Otherwise, why not just use .delegate() for everything which would not be best.

When WOULD delegate be appropriate? When your selector DOES have a common parent such as the often used li as the OP describes or where binding to a common parent through the .delegate() is desireable. Not for #selector in the singular, but worth examination for class or element selectors where multiples exist or dynamic placement of elements occurs.

Answer 2

Event delegation allows you to not bind events to individual elements, but to the element's common parents.

However .live() is inefficient in the sense that when the event is bubbling, it is bubbling to document, which is likely many steps away from a common parent you can manually specify.

Delegate fixes that by allowing you a specify a closer parent, not necessarily the document.

In short, use .delegate(), it's got everything that's good about .live() and fixes the problematic aspect.

To put it another way: .live() by default bubbles to the document. You can specify a closer context, and that'll eliminate its inefficiencies. .delegate() is just the sugar method that helps you do that.