javascript - jQuery 的 .on ('click' ) 与 .click() 之间的区别

Question

有人可以帮我理解这两个 jQuery 函数之间的区别吗？

$('#theElement').click(function() {
    ... click handler code ...
});

和

$('body').on('click', '#theElement', function() {
    .... click handler code ...
});

根据 jQuery's documentation ，.click()只是.on('click')的快捷方式。这就是我一直发现它的工作方式。但是，我今天在构建原型(prototype)时注意到了一个关键差异。在尝试将偶数监听器分配给 DOM 中尚不存在的元素时，我无法使用 .click()。但是，如果我用 $('body').on('click', '#theElement'... 做到这一点，它就成功了!

试图理解为什么...

.on() 是否与 .click() 没有的事件捕获有关？

感谢任何能帮助我指明正确方向的人。这让我抓狂!

Answer 1

.click() 是 .trigger('click') 的别名，而 .click(data, fn) 是一个.on('click', null, data, fn) 的别名。

您可能不会传入第二个参数，在这种情况下，.on('click', null, data, fn) 仍将使用 data 绑定(bind)处理程序作为处理程序而不是 fn。

此外，这意味着无法通过 .click(...) 分配委托(delegate)，所以如果你需要事件委托(delegate)，你应该使用 .on(...)

来自最新source :

_{jQuery v1.10.2，第 7554-7564 行:}

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {

    // Handle event binding
    jQuery.fn[ name ] = function( data, fn ) {
        return arguments.length > 0 ?
            this.on( name, null, data, fn ) :
            this.trigger( name );
    };
});