Monday, April 14th, 2008

Event Delegation for blur and focus

Category: Browsers, JavaScript, Standards, Unobtrusive JS, Usability

Over at, Peter-Paul Koch is researching if Event Delegation which works splendidly with click events is also possible for blur and focus.

Event Delegation means that you piggy-back on the behaviour of browsers to report events on child nodes up the tree to their parents. Instead of applying event handlers to each element you apply a single one on the main parent element and use the event target to determine which element was activated.
The benefits of Event Delegation are that you use a single event handler for a unknown amount of nodes. This is very handy when it comes to developing dynamic menus where the data is pulled via Ajax.

So far, PPK found that apart from IE all browsers play along, and there is a test page to give him feedback.

Posted by Chris Heilmann at 9:20 am

3.3 rating from 37 votes


Comments feed TrackBack URI

“.. that apart from IE…” Ah, the usual twist. ;) I believe Hedger Wang looked into some similar stuff with blur and focus.

Comment by Schill — April 14, 2008

So true, so many articles on many a modern technique have a trailing sentence, “oh this doesn’t work in the browser/s the majority of people use”. It’s great to see this stuff figured out but frustrating to see it rendered mostly unusable.

Comment by mrthan — April 14, 2008

Looking at the test page, it looks like it actually does handle IE using the onfocusin and onfocusout events that IE has.

Comment by MrBob — April 14, 2008

Nice stuff… I used this trick. we did an web app with javascript and because of the memory leaks we introduced this way of handling events: there is only one event handler that is on the body element

Comment by dicabrio — April 15, 2008

JavaScriptMVC’s Controller class has event delegation for blur focus cross browser. It even does submit.

Comment by JustinMeyer — July 20, 2008

Leave a comment

You must be logged in to post a comment.