javascript - jQuery中的事件绑定

Question

以下之间有什么区别：（有什么理由避免使用示例一吗？）

一：

$("#stuff").on("resize", function() { doThis(); });
$("#stuff").on("resize", function() { doThat(); });

二：

$("#stuff").on("resize", function() { 
  doThis(); 
  doThat();
});

Answer 1

说白了，其实没什么区别。

在现实世界的代码中，

• 您可能需要在代码中的不同位置附加两个处理程序，在这种情况下，您必须使用版本一（或类似版本）。
• 您可能希望能够选择性地分离处理程序，在这种情况下，事件可以按如下方式命名：

附加处理程序：

$("#stuff").on("resize.A", function() { doThis(); });
...
$("#stuff").on("resize.B", function() { doThat(); });

分离一个处理程序：

$("#stuff").off("resize.A");

保持连接的处理程序resize.B（即doThis()不会被调用但doThat()会被调用）。

Answer 2

在您的第二个示例中，如果doThis()引发异常则doThat()不会运行。第一个例子不是这样。

Answer 3

唯一的区别是存储和执行两个不同的事件处理函数，其中第二个片段满足一个。

算一下，第二个片段更优雅。我不会开始谈论性能，但是如果我们以这种方式绑定“数百个”方法，那么显然您不想绑定多个处理程序。

Answer 4

第二个会更好一点。

在第一个示例中，当 resize 事件触发时，您有两个函数调用的开销（除了对 doThis 和 doThat 的调用）。在第二个示例中，您只调用了一个事件处理程序。