Question

也许我正在失去理智，或许我错过了备忘录。我总是将$(selector).click用于任何和所有点击事件，除非我在事后与添加到DOM的元素交互。在这种情况下，我使用了$(closest permanent parent).on('click',selector。

之类的东西

我看到很多人在这里只使用。on()一切。我错过了.on()或其他什么的好处吗？这对我来说似乎不对。我已阅读文档，但我认为没有理由使用.on() vs .click()。

与静态DOM元素交互时是否严格优先？

修改

显然我不清楚。我理解.on()用于动态生成的元素。我的问题是Why use it for static elements？

Answer 1

我基本上将动态生成的元素的 .on() 事件处理程序附件用作一种委派操作。

<强>更新

另一个目的是，只要您想使用 .on / .off

，就可以 attach/detach 事件处理程序

Answer 2

.click()被定义为*：

jQuery.fn.click = function( data, fn ) {
    return arguments.length > 0 ?
        this.on( 'click', null, data, fn ) :
        this.trigger( 'click' );

click只是on函数的一部分，因此对于性能.on()稍快一些。也就是说，差异可以忽略不计，这不是我更喜欢on而不是click的实际原因。

我坚持on超过click的真正原因是可维护性。我经常会通过绑定.on('click', ...)方法启动插件，然后将其更改为由点击触发的.on('widgetaction', ...)事件，但也可能由keypress或其他任何其他事件触发相关事件。

坚持使用.on()功能也意味着我可以轻松地返回并从.on('click', ...)更改为.on('click', selector, ...)而无需付出太多努力。

一般来说，归结为一致性，我发现使用.on()比使用.click()更加一致。

_{*我稍微修改了source code以特别引用click事件，引用jQuery v1.10.2第7554-7564行作为原始未修改版本。}

Answer 3

你是对的我喜欢$（selector）.click。它的可读性更好

Answer 4

除了更合理的API（imo）之外，使用on()的好处是您可以指定以下事件处理程序

$(body).on('click', '.myDiv', function() {
    //do stuff here
});

旧的和不赞成的（取决于jQuery的版本）live()做了同样的事情，也就是说，将点击处理程序绑定到将来可能会引入的元素，{{ 1}}方法效果更好，因为您现在对所有事件处理程序on()等使用相同的统一API。

Answer 5

使用$('selector').click()和$(body).on('click', 'selector')之间的主要区别在于动态添加的内容（即ajax）。 on()将在页面加载后添加内容时完美无缺地运行，但click()仅适用于页面加载时显示的内容。

来自jQuery文档：

.on()

.click()

不要忘记.live()：“为现在和将来与当前选择器匹配的所有元素附加事件处理程序”。

Answer 6

首选方法（用于直接绑定）是使用.on()代替.click()。

你为什么这么说？因为.click()是.on()的快捷方式。正如您所见here，.click()函数只执行element.on('click')。

话虽如此。 .click()只添加1个函数调用，这意味着没有性能（即使它只是一点点）。

.on（'click'）VS'relector.click

6 个答案: