Event Handling versus Event Delegation
If you ever wondered how flexible web applications with hundreds of objects that need event handling are built, the trick behind it is called “Event Delegation”.
I didn’t come up with it, and it is nothing new either, but as some people seem to get confused when the term crops up, I’ve written a quick example why event delegation helps keeping web apps light and fast.
September 27th, 2006 at 12:10 pm
Interesting article Christian but the adding another item to the Handler list worked fine when I clicked it. (Firefox, Mac OS 10.4)
Josh
November 9th, 2006 at 6:43 pm
ppk not only knows, but writes extensively about this in his much recommended book
April 26th, 2007 at 4:30 am
Not all people know about the YAHOO JS library innards to understand your point. A simple HTML + a regular javascript illustrating the mechanism would have sufficed a lot. I doubt people with little knowledge of DOM and JS would understand what you meant.
April 26th, 2007 at 11:40 pm
nicely put. good idea, i like it. will try it out right away.
April 27th, 2007 at 11:44 pm
I understand the reasoning if you want all your child elements to do the event, but what should I do in the case of a behavior like:
ul.onmouseout=closeAllChildren;
…
The problem I’m having is that all the children elements will also call the function when I leave them, but am still inside the UL element.
Please help, this has been escaping me for awhile.
April 28th, 2007 at 8:13 am
Anthony this is as easy, just add another handler to the UL elements inside the others or handle the functionality in the listener method. The listener method gets everything in the element, so you can compare the nodeName of the target element with UL and do other stuff.
October 4th, 2007 at 9:55 pm
How do you go about using either (bubbling or handling) to the history plugin by Klaus?
$(’a.remote’).remote(’#place’, function() {
if (window.console && window.console.info) {
console.info(’content loaded’);
}
});
$.ajaxHistory.initialize();
January 16th, 2008 at 11:28 pm
Christian,
this is the most well written description of Event Delegation, my congrats, info on this is scarce.
I used it so much that I should make my own scripts to handle that with selectors. I can actually handle also the “focus” and “blur” events cross-browser by implementing a small trick in the handling/fixing of events.
You can see my work on delegates here:
http://javascript.nwbox.com/NWEvents/
Look under Delegates to see the only example specific to this method bound to CSS3 Selectors.
Though my syntax is not that short compared to jQuery or similar, I think the idea is unique.
I was searching for “delegates” related to “onload” problems but was not able to find anywhere talking about the fact that “Event Delegation” can lead to avoid having to resort to “onload” or similar method to attach functionality to the page at initial startup.
You seem to have a deep knowledge of these techniques, I would like your suggestion and comments on my implementation and possible improvements.
Do you mind if I copy (with credits) some Delegation example to include on my site ?
July 25th, 2008 at 8:25 am
This should be called “The benefits of using Event Bubbling” and not have a new obscure term Event Delegation invented for it.