在下面的列表中哪一个用于.click的性能更好

Question

Please vote for me which one in the below list is better?

I have HTML:

<div id="container">
    <button class="btn">Click Here 1</button>
    <button class="btn">Click Here 2</button>
    <button class="btn">Click Here 3</button>
    <button class="btn">Click Here 4</button>
    <button class="btn">Click Here 5</button>
    <button class="btn">Click Here 6</button>
    <!-- A lot of buttons -->
    <button class="btn">Click Here n - 2</button>
    <button class="btn">Click Here n - 1</button>
    <button class="btn">Click Here n</button> 
</div>

And Javascript with jQuery is:

Case 1.1:

$(".btn").click(function(e){
    //@todo something here
});

Case 1.2:

var doSomething = function(e)
{
    //@todo something here
}
$(".btn").click(doSomething);

Case 2:

$("#container").click(function(e){
    if( $(e.target).is(".btn") )
    {
        //@todo something here
    }
});

I am confused a litle bit what are different between them?

Answer 1

You should use the new jQuery on() function

$(document).on("click", ".btn", doSomething);

so that

• dynamically added content will be covered
• jQuery won't have to waste time searching out, and wrapping all affected buttons with the handler; all clicks will propogate up to the context, and jQuery will apply them if they match the selector— .btn in this case

If you know that all your buttons will be in #container, then you would use that as the context, instead of document.

$("#container").on("click", ".btn", doSomething);

Answer 2

Case 1.1 and 1.2 are essentially the same. The only thing you gain from 1.2 is that you can call the function independently. If this is a need, then 1.2 should be used, if not, either is fine.

Case 2 is actually not functionally equivalent to the others. This is essentially equivalent to live . Using click will only attach to matching elements at the time click is called. Case 2 (and live ) will match the selector at the time the event happens. If any .btn elements have been added after this code is called. Case 2 will let you click on them as well.

EDIT: Note that in 1.7 live is replaced by on with certain parameters.

Answer 3

Case 2 would be the best if you plan to use doSomething somewhere else as well. If not, both 1 and 2 are equally good. Of course, only talking style-wise... functionality is the same.

Answer 4

Case 1.1 is a common anonymous function for your event handler and is the most often used case.

Case 1.2 you would use if you also want to call the function directly, not only as an event handler, so you need some way to refer to it.

Case 2 is useful if you have a very large number of things, because it creates only one event handler instead of many. This case will also catch new items of class btn that are dynamically added to #container