jQuery .on('click') 与 .click() 和 .delegate('click')答案

【问题标题】：jQuery .on('click') vs. .click() and .delegate('click')jQuery .on('click') 与 .click() 和 .delegate('click')
【发布时间】：2019-12-04 16:01:12
【问题描述】：

我习惯于使用.click() 和delegate('click')，所以当我读到这两个版本在最新版本的 jQuery 中都已弃用时，我以为我会读到它，但我有点摸不着头脑。

文档here 似乎表明这是.live() 和.delegate() 的直接替代品，但.click() 和.bind() 具有不同的行为，即绑定到当前存在的对象，其中在 DOM 的整个生命周期内，绑定到与选择器模式匹配的任何对象的其他对象。

在大多数情况下，这不会产生很大的不同，但是当动态地将元素添加到您的 DOM 时，这是一个重要的区别。与旧模式匹配的新对象不会使用.click()将监听器绑定到click事件，但会使用.delegate()。

我的问题是，如何使用.on() 方法来复制先前存在的.delegate() 和.bind() 的行为？还是未来一切都朝着.delegate()风格发展？

【问题讨论】：

阅读documention 以获得click()。 它没有被弃用。 "...这个方法是一个 shortcut 用于 ....on("click", handler) 从 jQuery 1.7 开始。"
...好的，请允许我改写一下：它被重新利用了。以前是.bind()的快捷方式，现在不是了。
它现在是.on() 的快捷方式，它已取代.bind() 用于将事件绑定到现有元素。它还替换了 .delegate() 用于静态（非文档）元素的事件委托，以及 .live() 用于整个文档的事件委托。
只要使用 .on() 就可以了
@AnthonyGrist：这取决于您处理的事件类型和数量。如果您有 100 个完全不相关的事件，那么直接在元素上处理它们会更有效，而不是让所有事件都通过一个处理程序，该处理程序必须通过所有 100 个选择器来确定哪个事件到达哪个处理程序。

标签： jquery

【解决方案1】：

仍然支持这两种模式。

以下对bind()的调用：

$(".foo").bind("click", function() {
    // ...
});

可以直接转换成如下对on()的调用：

$(".foo").on("click", function() {
    // ...
});

以及对delegate()的以下调用：

$("#ancestor").delegate(".foo", "click", function() {
    // ...
});

可以转换成以下对on()的调用：

$("#ancestor").on("click", ".foo", function() {
    // ...
});

为了完整起见，以下调用live()：

$(".foo").live("click", function() {
    // ...
});

可以转换成以下对on()的调用：

$(document).on("click", ".foo", function() {
    // ...
});

更新：

除了on事件，其余事件在不同的jQuery版本中被弃用。

bind - 不推荐使用的版本：3.0
live - 已弃用版本：1.7，已删除：1.9
delegate - 不推荐使用的版本：3.0

【讨论】：

优秀。这是我所怀疑的，但文档对我来说并不清楚。谢谢。
有趣的是，delegate 似乎比其他人快得多：jsperf.com/on-vs-bind-vs-delegate-vs-native，使用委托 on() 进行更新，与委托一样快...
使用delegate() 如果我删除“.foo”元素，然后我再次添加“.foo”，初始绑定仍然存在。与on() 这种行为是一样的吗？我正在尝试 jquery 2.2.4 并且似乎删除了绑定。
@ontananza，取决于您使用的on() 的形式。如果您正在使用绑定表单并且匹配的元素被删除，则该事件将不会被真正处理。如果您使用的是委托表单并且祖先被删除，那么该事件也不会被真正处理。您必须了解幕后发生的事情才能正确使用on()。

【解决方案2】：

on 方法可以替换 bind 和 delegate，具体取决于它的使用方式（也可以将 click 替换为 bind 可以替换它）：

.click(handler) == .on('click', handler)

.bind('click', handler) ==  .on('click', handler)

.delegate('click', '#id', handler) == .on('click', '#id', handler)

click、delegate 或 bind 方法都没有到达 deprecated page。我怀疑click 方法会不会。

【讨论】：

【解决方案3】：

您可以从源代码中推断出别名的用法。

console.log($.fn.delegate);
function (a, b, c, d) {
    return this.on(b, a, c, d);
}

console.log($.fn.bind);
function (a, b, c) {
    return this.on(a, null, b, c);
}

documentation 还提供了使用示例：

$(elements).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(elements).on(events, selector, data, handler);        // jQuery 1.7+

【讨论】：

【解决方案4】：

.delegate() 和 .bind() 使用 on 方法。而.click() 也是shortcut 的.on()。

【讨论】：