javascript - 下面列表中的 .click 哪个性能更好

Question

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

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

带有 jQ​​uery 的 Javascript 是:

案例 1.1:

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

案例 1.2:

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

案例二:

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

我有点困惑它们之间有什么不同？

Answer 1

您应该使用新的 jQuery on()功能

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

这样

• 将涵盖动态添加的内容
• jQuery 将不必浪费时间搜索并用处理程序包装所有受影响的按钮；所有点击都将传播到上下文，如果它们与选择器匹配，jQuery 将应用它们——在本例中为 .btn

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

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