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

jQuery .on('click') vs. .click() and .delegate('click')

提问by Jeremy Holovacs

I'm used to using .click()and delegate('click'), so when I read both were deprecated in recent versions of jQuery I thought I'd read up on it, but I'm scratching my head a bit.

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

The documentation hereseems to suggest that this is a drop-in replacement for .live()and .delegate(), but .click()and .bind()had a different behavior, namely binding to currently existing objects, where the others bound to any objects that matched the selector pattern througout the lifespan of the DOM.

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

In most cases, this wouldn't make a big difference, but when adding elements to your DOM dynamically, this is an important distinction. New objects matching the old pattern would nothave listeners tied to the clickevent using .click(), but wouldwith .delegate().

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

My question is, how does one use the .on()method to duplicate the behavior of both the pre-existing .delegate()and .bind()? Or is everything in the future going towards the .delegate()style?

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

回答by Frédéric Hamidi

Both modes are still supported.

仍然支持这两种模式。

The following call to bind():

以下调用bind()：

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

Can be directly converted into the following call to on():

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

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

And the following call to delegate():

以及以下调用delegate()：

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

Can be converted into the following call to on():

可以转换为以下调用on()：

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

For completeness, the following call to live():

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

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

Can be converted into the following call to on():

可以转换为以下调用on()：

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

---

---

UPDATE:

更新：

Except onevent, the rest of the events were deprecated in different jQuery versions.

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

• bind- version deprecated: 3.0
• live- version deprecated: 1.7, removed: 1.9
• delegate- version deprecated: 3.0

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

回答by Guffa

The onmethod can replace both bindand delegatedepending on how it's used (and also clickas bindcan replace that):

该on方法可以同时取代bind，并delegate取决于如何使用它（也click作为bind可替换）：

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

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

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

Neither the click, delegateor bindmethods have made it to the deprecated pageyet. I doubt that the clickmethod ever will.

无论是click，delegate还是bind方法都做了它对过时的页面呢。我怀疑这种click方法永远不会。

回答by Rob W

You can deduce the usage for the aliases from the source code.

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

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);
}

The documentationalso provides the usage examples:

该文档还提供了使用示例：

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

回答by antyrat

.delegate()and .bind()uses onmethod. And .click()is a shortcutfor .on()too.

.delegate()和.bind()使用on方法。而且.click()是一个快捷的.on()了。