Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I have been told that when there are multiple buttons on the page for same purpose but targeting different item e.g. delete item on a grid of items, they say it is recommended to just register for click handler only on the top most element like 'body' and check what was clicked instead of hooking up click with every delete button.

Whats the benefit of this? Creating more handlers causes problems? Is it an optimization of some sort? Is it a pattern? Does it have anything to do with performance? Where can I read more about it?

share|improve this question
1  
I haven't heard of this as a "pattern". I can see where it'd be helpful if you had rows being added and removed, as you wouldn't have to attach a handler every time you added a row. But i wouldn't go so far as to recommend it for the general case. –  cHao Nov 14 '11 at 9:02
    
The only thing I can think of, is the request size. Since with every character you write in an HTML page, the request size increases, so writing a single click on the body and adding an if in it might cause lesser characters then assigning a click event to every delete button –  Naveed Butt Nov 14 '11 at 9:53
5  
What you're talking about is very well known as Event Delegation -- it's a very good technique, and there's so much on the Internet about this topic that saying it all here would be superfluous. –  good_computer Nov 14 '11 at 13:24
    
@greengit can you post that as an answer so I can accept it? –  Hasan Khan Nov 14 '11 at 14:14

3 Answers 3

Its an "idiom" not a "pattern".

This advantage in JS is that the identity of the button is "this" so you can interrogate the "this" variable to find out about which button was pressed.

Its a nifty shortcut if you have lots of similar processing with small variations.

share|improve this answer
1  
@HasanKhan, in JavaScript if you bind an event to 100 elements, you have 100 references to a function. If you bind an event poorly you may have 100 references to 100 functions. If you use event delegation you have 1 reference to 1 function. Using a library like jQuery makes this such a simple task that there's no reason not to use event delegation. It also improves the vitality of the page. If you change the content within the page, the delegate will continue to catch events fired on newly created DOM elements without needing to worry about rebinding/unbinding. –  zzzzBov Nov 17 '11 at 19:26

I would be very skeptical. First of all I never put the onclick in the HTML but always attach it later with jquery or the like, so the added size of the HTML is not really an issue.

Past that you will need quite a bit of logic in the callback to figure out what to do with the click event. I would rather have a bunch of simpler functions than one really complex one.

share|improve this answer
1  
Where does he suggest putting onclick in the HTML? That would be stupid. He clearly means using body.addEventListener –  Raynos Nov 14 '11 at 14:22
up vote 1 down vote accepted

From @good_computer comment

What you're talking about is very well known as Event Delegation -- it's a very good technique, and there's so much on the Internet about this topic that saying it all here would be superfluous. - greengit

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.