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);

Answer 2

案例1.1和1.2基本相同。你从1.2中获得的唯一一点就是你可以独立调用这个函数。如果这是需要，那么应该使用1.2，否则就可以了。

案例2实际上与其他案件在功能上并不相同。这基本上等同于live。使用click只会在调用click时附加到匹配的元素。情况2（和live）将在事件发生时匹配选择器。如果在调用此代码后添加了任何.btn元素。案例2也允许您点击它们。

编辑：请注意，1.7 live被on替换为某些参数。

Answer 3

如果您计划在其他地方使用doSomething，则情况2将是最佳的。如果不是，1和2都同样好。当然，只谈风格......功能是一样的。

Answer 4

案例1.1是事件处理程序的常用匿名函数，也是最常用的案例。

如果您还想直接调用函数，而不仅仅是作为事件处理函数，那么您将使用案例1.2，因此您需要某种方式来引用它。

如果你有很多东西，情况2很有用，因为它只创建一个事件处理程序而不是很多。此案例还将捕获动态添加到btn

的新课程#container

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

案例1.1：

案例1.2：

案例2：

4 个答案: