Event Delegation is a technique that get a lot attention lately in blogs and other resources  that I read, so I decide to write about it too.
 
Event Delegation is a technique to attach globally events to each element that match the condition (for example: CSS/XPath selector). Every time that new element which correspond the condition will appended into the document, it will have the event automatically.

The technique works with the bubbling ability of the DOM Events model to capture the event. The bubbling ability enable to register an event in high level and catch the event for lower level, because every event that occur will bubble up to higher elements in the hierarchy. For example if we have this structure:
<ul>
    <li><span>text</span> other text </li>
    <li><span>text</span> other text </li>
    <li><span>text</span> other text </li>
</ul>

When we click on one of the SPAN elements, the click event will fire on the SPAN element, and after on each of his parents: li, then ul, and then more higher level such as BODY element, document, and window objects.

When an event occur, an event object sent to the registered event listener. The event object contains a lot of properties and methods, the one important to this technique is the `target` property. The `target` property point on the element which fire the event, in our example it is the SPAN element. In Internet Explorer there isn't `target` property, instead there is the not standard `srcElement` property.

If we append a new “<li><span>text</span> other text </li>” into the ul, the SPAN element will automatically has the event listener, without do anything, because we capture it in more higher level.

I added this technique to my UI library (Mootools UI), and a demo page that show the technique.

More reading:
http://icant.co.uk/sandbox/eventdelegation/
http://cherny.com/webdev/70/javascript-event-delegation-and-event-hanlders

Hebrew translation of this post