3

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?

3
  • 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, 2011 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 Nov 14, 2011 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.
    – treecoder
    Nov 14, 2011 at 13:24

3 Answers 3

2

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.

1
  • 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, 2011 at 19:26
1

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

0
0

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.

1
  • 1
    Where does he suggest putting onclick in the HTML? That would be stupid. He clearly means using body.addEventListener
    – Raynos
    Nov 14, 2011 at 14:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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