javascript - JQuery : Event Binding Methods & Performance $(document). on ("click", "#id", fn) VS $ ("#id").on ("click", fn)

Closed. This question needs to be more focused 。它目前不接受答案。












想改善这个问题吗？更新问题，使其仅通过 editing this post 关注一个问题。

6年前关闭。



Improve this question




以下哪一项在性能等方面更好，为什么？

1. $(document).on("click", "#id", function (e) {   });

2. $("#id").on("click", function (e) {   })

3. $("#id").die('click').live("click",function(e){ });

4. $("#id").live("click",function(e){ });

如果我们使用事件委托(delegate)会对性能产生什么影响？我正在寻找深入的解释。

最佳答案

TLTR
所有上述指定方法的解释如下。

$(document).on("click", "#id", function (e) { });

这种绑定(bind)事件的方式，称为 event delegation ，在文档或静态父元素(比如 body )上，而不是在动态 DOM 操作的情况下完成。一个很好的例子是，考虑这样一种情况，您希望将一个事件绑定(bind)到一个 DOM 元素，该元素在页面加载时可能不存在，但稍后会通过远程加载或动态 DOM 引入到 DOM 中操纵。如果您在 DOM 中引入新元素后立即为其绑定(bind)事件，那么您的代码将不会整洁。所以在这种情况下，我们首先使用上面的方法来绑定(bind)事件，这样我们就不必担心在绑定(bind)发生时元素是否存在。这里点击事件绑定(bind)到文档，然后委托(delegate)给指定的元素。由于这是绑定(bind)到文档或静态父级，事件传播时间会更长，即 事件传播会比第二种方法慢 。 But this is the preferred way of doing it 。

$("#id").on("click", function (e) { })

这种绑定(bind)用于 DOM 不需要是静态的，但在绑定(bind)事件时您指定的元素已经存在的情况。通常我们在静态 DOM 元素情况下这样做。唯一的问题是，只有当事件必须绑定(bind)到的特定元素已经存在于 DOM 中时，才能使用这种绑定(bind)。由于这是直接绑定(bind)并且不涉及任何委托(delegate) 事件传播将比方法 1 快 。

$("#id").die('click').live("click",function(e){ }); 和

$("#id").live("click",function(e){ }); 在 jQuery 1.7 中已被弃用
并在 jQuery 1.9 中移除。

这是您问题的答案，哪种方法更快？

Method 2 > Method 1 > Method 3 & 4

但仍然 Method 1 是首选方法。

关于javascript - JQuery : Event Binding Methods & Performance $(document). on ("click", "#id", fn) VS $ ("#id").on ("click", fn)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29642681/