Question

我有一些代码：

$('.someClass').each(function() {
    $(this).on(...);
});

和

$('.someClass').on(...);

使用第一个和第二个代码片段在幕后发生了什么？我注意到第二个工作速度更快，并且与第一个工作结果相同。

Answer 1

首先，在第一个片段中，您将为结果中的每个元素创建一个单独的jQuery对象。我猜这与额外的时间有关。

Answer 2

在一个简单的行中，.on()在内部运行.each()函数，用于事件绑定与给定的选择器（作为代码.someClass）。

请参阅.on()的摘要：

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

    // Types can be a map of types/handlers
    if ( typeof types === "object" ) {
        // ( types-Object, selector, data )
        if ( typeof selector !== "string" ) {
            // ( types-Object, data )
            data = data || selector;
            selector = undefined;
        }
        for ( type in types ) {
            this.on( type, selector, data, types[ type ], one );
        }
        return this;
    }

    if ( data == null && fn == null ) {
        // ( types, fn )
        fn = selector;
        data = selector = undefined;
    } else if ( fn == null ) {
        if ( typeof selector === "string" ) {
            // ( types, selector, fn )
            fn = data;
            data = undefined;
        } else {
            // ( types, data, fn )
            fn = data;
            data = selector;
            selector = undefined;
        }
    }
    if ( fn === false ) {
        fn = returnFalse;
    } else if ( !fn ) {
        return this;
    }

    if ( one === 1 ) {
        origFn = fn;
        fn = function( event ) {
            // Can use an empty set, since event contains the info
            jQuery().off( event );
            return origFn.apply( this, arguments );
        };
        // Use same guid so caller can remove using origFn
        fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
    }
    return this.each( function() {
        jQuery.event.add( this, types, fn, data, selector );
    });
}

因此，如果您浏览代码的第一个片段，即。通过在.on()内调用.each()，然后.on()也会为该元素运行.each()。

使用$（element）.each（）幕后发生了什么？

2 个答案: