使用 .on('click' 和 .click 有什么区别？[重复]答案

【问题标题】：Whats the difference between using .on('click' and .click? [duplicate]使用 .on('click' 和 .click 有什么区别？[重复]
【发布时间】：2024-01-08 14:49:01
【问题描述】：

可能重复：
Difference between .on('click') vs .click()

当处理一个 div 的点击时，使用 .on 和 .click 有什么区别：

   $('#myDiv').on('click' , function(e) {
    });


    $('#myDiv').click(function(e) {
    });

【问题讨论】：

我听说使用.on 更快。
只要不是委托点击处理程序，几乎什么都没有！
@adeneo 什么是委托点击处理程序？
这一切在文档中都有很好的解释，但是委托事件用于DOM中尚不存在的元素。

标签： javascript jquery

【解决方案1】：

两者都一样...

.click 内部将调用.on 方法。

如果你看到这部分 jQuery 源代码。

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 ) {
        if ( fn == null ) {
            fn = data;
            data = null;
        }

        return arguments.length > 0 ?
            this.on( name, null, data, fn ) :
            this.trigger( name );
    };

你可以看到所有的方法都依次调用.on方法。依此类推会降低你的一级。

这是.on在jQuery中的实现。

jQuery.fn.extend({

    on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
        var origFn, type;

        // Types can be a map of types/handlers
        if ( typeof types === "object" ) {.....

【讨论】：

【解决方案2】：

后者是前者的捷径。

.on 更加“低级”和灵活。您可以将事件的第二个参数约束添加到选择器，例如：

$('#myDiv').on('click' , "span.icon", function(e) {
    // this event will be fired when a click is made on a span.icon inside the #myDiv 
});

【讨论】：

【解决方案3】：

根据docs，截至jQuery 1.7 .click()：

此方法是.bind("click", handler) 的快捷方式，也适用于 .on("click", handler)

【讨论】：