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

Question

请为我投票,以下列表中哪一个更好？

我有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>

和jQuery的Javascript是:

案例1.1:

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

案例1.2:

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

案例2:

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

我很困惑他们之间有什么不同？

Answer 1

您应该使用新的jQuery on()函数

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

以便

• 动态添加的内容将被涵盖
• jQuery不必浪费时间搜索,并用处理程序包装所有受影响的按钮; 所有点击都将传播到上下文,如果jQuery与选择器匹配,jQuery将应用它们 - .btn在这种情况下

如果您知道所有按钮都在#container中,那么您将使用它作为上下文而不是文档.

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