$(sel).bind("click"、$(sel).click()、$(sel).live("click"和$(sel).on("click"之间有哪些显著的区别？

Question

$(sel).bind("click"、$(sel).click()、$(sel).live("click"和$(sel).on("click"之间有哪些显著的区别？

jqueryonclickclickbindmouseclick-event

3

我已经使用它们很长一段时间了，但大多数时候，我更喜欢较短的那个，但是，我想真正深入了解细节。我可能一直在创建有错误的代码，我不想在网络上贡献和传播低质量的代码。

所以，请告诉我：

它们之间有哪些明显的优缺点，或者就像冰淇淋一样，口味不同但效果相同吗？

鼓励每个人就这个问题发表专业意见。

非常感谢提前。

- Dexter Huinda

2

可能是重复的问题：jQuery: $().click(fn) vs. $().bind('click',fn);（其中答案也讨论了on）。 - Thilo

1

最佳答案在文档中：bind()、click()和on()。 - VisioN

1

@VisioN 实际上文档太冗长了，所以我发了这个问题，希望从领域专家那里得到精准、准确、清晰的信息。 - Dexter Huinda

3

那个问题是在2009年提出的。自那以后发生了很多事情，所以为了更新我的和其他人的技术信息，我重新发布了一个略微相同但不同的问题。 - Dexter Huinda

2个回答

1

在那种特定的情况下，功能上没有什么区别。然而，从jQuery 1.7开始，.on比.bind更受青睐，至于.click - 它只是一个常见事件处理程序的速记。

- Ry-

为什么.on比.bind更受欢迎？有任何重要的原因吗？ - Dexter Huinda

@DexterHuinda：我猜测，由于它是jQuery库中最新添加的绑定方法，因此它目前是最优化的。只是猜测而已。 - Nope

@DexterHuinda：没有头绪。但我个人觉得它看起来更好 =) - Ry-

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nope · Accepted Answer

bind()在1.0版本中添加，live()在1.3版本中添加，delegate()在1.4.2版本中添加，on()在1.7版本中添加。

从1.7版本开始，建议使用on()，不建议使用live()。如果您正在使用1.3版本，请使用bind()代替live()；从1.4.2版本开始，请使用delegate()代替live()；从1.7版本开始，请使用on()代替其他任何方法。

关于$("selector").click。从click() 文档中可以看到：

在前两种情况下，此方法是绑定事件的快捷方式，等同于 jQuery 1.7 的 .on("click", handler)。在第三种情况下，当不带参数调用 .click() 时，它是 .trigger("click") 的快捷方式。

为什么要使用on()而不是其他方法？
on()是jQuery库1.7版本中最新添加的成员。 on()拥有几个方法签名，使其能够提供与以前版本相同但改进和优化的结果。引用文档中的话：

自jQuery 1.7版起，.on()方法提供了所有所需的功能以附加事件处理程序。

基本上不需要再使用bind()或delegate()了。当然，它们也可以正常工作，并且使用这些方法应该没有任何问题，但我总是认为最新的添加都是针对以前版本的缺点进行了优化和改进（除非文档中另有说明，就像live()一样）。
基于此，我建议改用on()。

live()不被全面推荐的原因更多是与它的缺点有关。引用自live()文档。

使用.live()方法不再推荐，因为jQuery的后续版本提供了更好的方法，这些方法不具有其缺点。特别是，使用.live()会出现以下问题：

- 在调用.live()方法之前，jQuery尝试检索选择器指定的元素，在大型文档上可能耗时较长。 - 不支持链接方法。例如，$("a").find(".offsite, .external").live( ... );无效且不按预期工作。 - 由于所有.live()事件都附加在文档元素上，因此事件在处理之前需要走最长和最慢的路径。 - 在移动iOS（iPhone、iPad和iPod Touch）上，对于大多数元素，单击事件不会冒泡到文档主体，并且不能与.live()一起使用，除非应用以下解决方法之一： - 使用本地可点击元素，如a或button，因为这两个元素都会冒泡到文档中。 - 使用.on()或.delegate()附加到低于document.body级别的元素，因为移动iOS确实会在body内部冒泡。 - 将CSS样式cursor:pointer应用于需要冒泡点击的元素（或包括document.documentElement的父元素）。但请注意，这将禁用元素上的复制\粘贴，并在触摸时导致其被突出显示。 - 在事件处理程序中调用event.stopPropagation()无法有效地停止文档中较低处附加的事件处理程序；事件已经传播到文档。 - .live()方法以令人惊讶的方式与其他事件方法交互，例如，$(document).unbind("click")将删除通过任何对.live()的调用附加的所有单击处理程序！

然而，文档中还有更多好东西。

其他资源
click()
bind()
live() (不要使用)
delegate()
on()