1. What is event delegation in JavaScript?

To start with some example let’s assume that there is one DIV element with 100 A tags inside. If you assign event to every A tag that as you may know slowes down your browser. That’s a problem because sometimes that can happen, even with more than one hundred A tags. Imagine you’ve a map with one thousand markers, which are A tags. Attaching events slowes down the browser, because every of these A tags bubbles the event that has been fired. And that makes your CPU to make thousands of calculations. Of course you can avoid this problem with a simple technique. Just attach one single event on the container DIV element. Thus you can check if some child of the DIV element has been the target of the event. This makes the browser to breath.

2. How event delegation is implemented in jQuery – $.live()

In jQuery the so called event delegation is done by the $.live() method. As you may see in the doc pages of jQuery thus you can attach events on a selected element even before that element exists into the DOM. Just because the attached event is on the parent element, and once there are more and more elements attached to it as children, thay behave the same way as those attached before.

Example:
$('div > a').live('click', doSomething);

3. bind with $.bind() or $.click, $.mousemove …

More common use in jQuery is to attach elements with $.bind or it’s shortcus $.click, $.mousemove … etc. The problem is that you have to call them again and again after you add more and more elements to the DOM, because this attach events to the matched elements. Normally when you add more elements they don’t have any event attached to.

Example:
$('div > a').click(doSomething);
// this example does exactly the same thing as the one above,
// but applied on 1000 tags is much slower!

4. Performance

Of course the performance is better with $.live, but be carefull when playing around with those methods. See more performance results here.