Skip to content

Event delegation in jQuery

Old content alert!

Thanks very much for visiting my blog. Always happy to have people read my stuff but just thought I should point out this post is years old. If it's about technical stuff there is a possibility that it is no longer relevant, if it's a bug report/fix I'm hoping that it should now have been fixed.

Of course if this is what you're looking for and it does work then great, just don't say I didn't warn you...

At the start of the week I was lucky enough to attend @media Ajax in London. It was a great two days and while surprised at rather small number of attendees (not sure if it’s proximity to d.Construct and Fronteers had anything to do with this..) yet again the quality of speakers (as with all @media events) were high and I feel that I got a lot out of the two days (and nights at the pub :>)

While in the past I have written up my conference experiences this year I must tip my hat towards Mike Davies as he has done an excellent write up of both @media ajax day 1 and @media ajax day 2 over at his blog. Go and read that, it’s really well written and sums everything up well.

One thing that did cause suitable excitement (for me at least) was the talk from Yehuda Katz talking about jQuery as it highlighted a previously unknown method of achieving event delegation natively inside the framework. If you’re not sure; event delegation is a way to avoid cluttering up memory (in extreme cases) and code complexity by assigned event handlers to a multiple elements when you can assign one ‘uber’ listener and have that decide that action to take depending on which of it’s child elements was effected. Further information and articles about event delegation are all over the web and well worth a read.

But back to JQuery business (and a quick apology as I have realised in the middle of writing this article that the two methods I am about to explain currently AREN’T actually fully native and require plugin’s. Full native support will be released in 1.3 it seems) and the code examples. Both are implemented in basically the same way but it’s always good to have a couple of options.

Listen (download at – flesler.blogspot.com/2007/10/jquerylisten.html)

Listen allows you to specify a parent element and have it return if it’s triggered against a specific action on a selector provided it to listen to.

$('ul').listen('click', 'li', function() {
alert('you clicked one of my li elements - and I can tell you which!');
});

The downside to the listen plugin is that it only allows for simple selectors (id, tag, tag.class or class – none of the cool jQuery specific stuff) to be listened against. Thankfully option number two allows for extra fun and games like this…

Delegate (download the code)

Delegate works in a similar way to listen but has full jQuery selector support so if you want to target more specific elements inside a parent then it’s for you

$('form').delegate('click', ':checkbox', function() {
alert('would have been kinda hard to find just checkboxes using listen');
});

Delegate will be (according to the roadmap) will likely be ported straight into jQuery proper once 1.3 is released.

So there you go – event delegation (unfortunately via plugin’s at the moment) in jQuery!

And as an added bonus there is also Dan Webb’s implementation that is still worth a read and something to consider using if you feel that his Low Pro behvaiour pattern JS is the best thing since sliced bread (it certainly looks v cool indeed and a very nice idea).

  • sreenivas

    the blur and focus events are not working with delegate…
    any fixes?

  • http://www.thecssdiv.co.uk Ross Bruniges

    OK – so :focus and :blur events won’t work out of the box as they don’t bubble up in the same was as click events (for example) do. Equally it’s important to remember that these events won’t work on anything that isn’t able to take focus (which is basically everything else other than an anchor or a form field).

    I’ve had a bit of a look around and the discussion in Dan’s jquery event delegation article discusses ways around it. There also seems to be an article on quirksmode about getting it to work – quirksmode.org/blog/archives/2008/04/delegating_the though currently (this will have hopefully been fixed by now) PPK’s server seems to be timing out :>