Implementing event delegation

So far we have looked at a range of methods for registering single events to single elements. These techniques are very useful but it becomes inefficient and laborious when we wish to register events for multiple elements.

If we take the example of a navigation control in the form of a list of links, we could implement a click event for each link by manually registering the event against the ID of the element. While this may be fine for a handful of links, as soon as the list starts to get larger it becomes very cumbersome to manage these events. The more links there are, the more it becomes prone to mistakes and bugs. Would you want to write (and manage) code to register click events to 50 links by hand if you didn't have to?

Fortunately, it so happens that the YUI has a solution for just this type of problem, namely Event Delegation.

Event delegation is a technique whereby we can designate a parent element to hand down events to its child elements. Picking up...