jquery - $(sel).bind ("click"、 $(sel).click(、 $(sel).live ("click"、 $(sel).on ("click"之间有什么显着差异?

标签 jquery onclick click bind mouseclick-event

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

所以,告诉我:

What are the significant advantages/disadvantages among them, or is it just like ice cream, different flavors but same "feel-good" effect?

鼓励每个人就此事发表专家意见。

提前非常感谢。

最佳答案

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() documentation :

In the first two variations, this method is a shortcut for .bind("click", handler), as well as for .on("click", handler) as of jQuery 1.7. In the third variation, when .click() is called without arguments, it is a shortcut for .trigger("click").

为什么使用 on() 而不是其他的?
on() 是最新添加的内容,在 1.7 版中加入了 jQuery 库。 on() 有多个方法签名,使其能够提供与先前版本相同的结果,但经过改进和优化。引用documentation :

As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.

基本上不再需要使用bind()delegate()。当然它会起作用,并且使用这些方法应该不会有什么坏处,但我总是假设最新的添加内容针对以前版本的任何缺点进行了优化和改进(除非文档另有说明,就像 live())。
基于此,我建议改用 on()

不推荐使用live()的原因更多是因为它的缺点。引用live() documentation

Use of the .live() method is no longer recommended since later versions of jQuery offer better methods that do not have its drawbacks. In particular, the following issues arise with the use of .live():

  • jQuery attempts to retrieve the elements specified by the selector before calling the .live() method, which may be time-consuming on large documents.
  • Chaining methods is not supported. For example, $("a").find(".offsite, .external").live( ... ); is not valid and does not work as expected.
  • Since all .live() events are attached at the document element, events take the longest and slowest possible path before they are handled.
  • On mobile iOS (iPhone, iPad and iPod Touch) the click event does not bubble to the document body for most elements and cannot be used with .live() without applying one of the following workarounds:
    1. Use natively clickable elements such as a or button, as both of these do bubble to document.
    2. Use .on() or .delegate() attached to an element below the level of document.body, since mobile iOS does bubble within the body.
    3. Apply the CSS style cursor:pointer to the element that needs to bubble clicks (or a parent including document.documentElement). Note however, this will disable copy\paste on the element and cause it to be highlighted when touched.
  • Calling event.stopPropagation() in the event handler is ineffective in stopping event handlers attached lower in the document; the event has already propagated to document.
  • The .live() method interacts with other event methods in ways that can be surprising, e.g., $(document).unbind("click") removes all click handlers attached by any call to .live()!

不过,文档中还有更多好东西。

其他资源
click()
bind()
live() (don't use)
delegate()
on()

关于jquery - $(sel).bind ("click"、 $(sel).click(、 $(sel).live ("click"、 $(sel).on ("click"之间有什么显着差异?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11148019/

相关文章:

jquery nextAll 并跳过第一个元素

javascript - 更正 jQuery 以从选择选项中读取

java - Android:从其他类调用 main 中按钮的 OnClick

单击 WPF TreeView 项

javascript - 像 Jquery 一样在 python/Django 中进行 DOM 操作

javascript - Mozilla FireFox 悬停的工作方式与 Chrome 不同

javascript - 单击按钮即可洗牌阵列

javascript - 如何从另一个范围内的函数调用事件监听器?

click - 双击间隔时间标准

c# - 等待按钮点击