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.

This is easy, on the element can be attached event listener an such event listener is built in as the click event is. It’s simply like that:

<div click="func1()"></div>

This with jQuery

A bit different with jQuery, but with the same effect is:

$('div').click(func1);

When there is a bubbling?

Well, if you just copy paste this code in your page:

$(document).click(function() { 

    console.log('clicked on the document');

});
$('div').click(function() { 

    console.log('clicked on the div');

});

Note: if you’re using Firefox keep the console.log function, in other case you may replace it with either alert or $.log from the recent jQuery plugin i wrote.

Now if you click over the div element you get both messages, cause there is no bubble canceling. If you’d like to add such canceling, just add this code to the click callback for the div element:

return false;

and now the code should look like:

$(document).click(function() { 

    $.log('clicked on the document'); 

});

$('div').click(function() { 

    $.log('clicked on the div'); return false;

});