javascript - 使用 .on('click' 和 .click 有什么区别？

Question

可能重复：
.on('click') 与 .click() 之间的区别

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

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


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

Answer 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方法。如此下去会降低你的一级。

这是.onjQuery 中的实现。

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" ) {.....

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

Answer 3

根据文档，从 jQuery 1.7 .click() 开始：

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