Browser behavior with huge doms

Question

Can we talk about how different browsers handle the following:

Draw an HTML document essentially representing the contents of a static application with lots of data.

<div class="abundant_class">
    <div class="abundant_class">
        <div class="abundant_class"></div>
        <div class="abundant_class"></div>
        ...
    </div>       
    <div class="abundant_class">...</div>
    <div class="abundant_class">...</div>
    ...
</div>

Imagine O (1000) such elements in a document.

What is the fastest way to assign a click event to all of these elements?

• <div class="abundant_class" onclick="javascript:foo()">
• $('.abundant_class').click(function(foo();));
• $('div').click(function(){if ($(this).hasClass('abundant_class')){foo();}
• something else?

I am interested to know how much memory and processor these selections carry.

Thanks in advance.

Trevor Mills

Answer 1

.live() .delegate(), ( ), :

$('div.abundant_class').live('click', function() {
  foo();
});

document click bubble up , .

, :

$(document.body).delegate('div.abundant_class', 'click', function() {
  foo();
});