3

如果我需要使用 jQuery 将多个事件附加到同一个元素.on()，我应该将所有事件合并到一个调用中并使用区分它们event.type吗？还是我应该.on()为每个事件单独打电话？

组合事件：

$('#main').on('mouseenter mouseleave click', '.myElement', function(event) {
    if (event.type == 'click') {
       return false;

    } else if (event.type == 'mouseenter') {
        $(this).addClass('active');

    } else if (event.type == 'mouseleave') {
        $(this).removeClass('active');
    }
}

单独的事件：

$('#main').on('click', '.myElement', function(event) {
   return false;
}

$('#main').on('mouseenter', '.myElement', function(event) {
    $(this).addClass('active');
}

$('#main').on('mouseleave', '.myElement', function(event) {
    $(this).removeClass('active');
}

哪个最快？

[编辑] 附加细节：显然我们需要考虑两个方面，第一个是页面完成加载并且正在设置这些事件处理程序时，仅使用一次.on()调用显然会更快。然而，第二个方面是这些事件何时真正被触发，当鼠标悬停或单击时.myElement，我认为更重要，因为它会发生很多次，而.on()调用只会被调用一次（如果 DOM 发生变化，则调用更多，但仍然少于事件本身）。

4

3 回答 3

4

您必须区分绑定事件（将回调附加到事件）和实际处理触发的事件（调用/执行回调）。第一个可能每页只出现一次，而后者可能会出现数百次，具体取决于用户活动。

  • 如果您只考虑事件绑定——它发生在文档准备好（最终）和每次 DOM 更改时（例如在 Ajax Complete 上）——那么只使用一个.on()调用和一个回调会更快：http: //jsperf.com/多个jQuery事件/ 2

  • 如果您考虑对被触发事件的处理（即用户单击或鼠标悬停.myElement），那么将所有事件组合成一个回调并用if语句区分它们也比拥有多个回调更快：http: //jsperf.com/多个jQuery事件/ 4

以下是两项测试的一些综合结果：

最快的绑定和最快的处理事件：

$('#main').on('mouseenter mouseleave click', '.myElement', function(event) {

    // Processing of the triggered event:
    if (event.type == 'click') {
        return false;

    } else if (event.type == 'mouseenter') {
        $(this).addClass('active');

    } else if (event.type == 'mouseleave') {
        $(this).removeClass('active');
    }
});

上面的代码是推荐的语法。以下示例仅供参考。

绑定慢约 30%，处理事件慢 50%：

$('#main').on('click', '.myElement', function(event) {
    return false;
});

$('#main').on('mouseenter', '.myElement', function(event) {
    $(this).addClass('active');
});

$('#main').on('mouseleave', '.myElement', function(event) {
    $(this).removeClass('active');
});

绑定最慢，处理事件慢 70%：

$('#main').on({
    mouseenter: function() {
        $(this).addClass('active');
    },
    mouseleave: function() {
        $(this).removeClass('active');
    },
    click: function() {
        return false;
    }
}, '.myElement');

绑定慢约 25%，处理事件最慢：

$('#main').on('click', '.myElement', function(event) {
    return false;
});

$('#main').on('hover', '.myElement', function(event) {
    $(this).addClass('active');
}, function() {
    $(this).removeClass('active');
});

绑定慢约 20%，处理事件慢 60%：

$('#main').on('click', '.myElement', function(event) {
    return false;

}).on('mouseenter', '.myElement', function(event) {
    $(this).addClass('active');

}).on('mouseleave', '.myElement', function(event) {
    $(this).removeClass('active');
});
于 2013-06-21T22:50:59.223 回答
0

我认为这些combined事件会很快奏效seperated。因为当在 中使用combined jquery.on()调用一次时jquery library，它会在内部调用它。如果它被调用seperately，那么每次它需要调用jquery library. 如果你看到代码，你会发现，

 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;
        }
             /* here is looping if in case combined event then this
                loop will work and all your events will bound here */
             /* in case of seperated events
                loop will work only for selected event and it will bind*/
        for ( type in types ) {
            this.on( type, selector, data, types[ type ], one );
        }
        return this;
    }

combined events如果你使用like，它会更容易，

$('#main').on({
    mouseenter: function() {
        $(this).addClass('active');
    },
    mouseleave: function() {
        $(this).removeClass('active');
    },
    click: function() {
        return false;
    }
}, '.myElement');
于 2013-06-21T07:20:58.097 回答
-1

正如预期的那样，只有一个选择器的选择器是最快的。在这里自己查看测试结果：

http://jsperf.com/multiple-jquery-events

我还添加了一些其他执行相同操作的代码片段。这段代码最好用：

$('#main').on('mouseenter mouseleave click', '.myElement', function(event) {
    if (event.type == 'click') {
        return false;
    } else if (event.type == 'mouseenter') {
        $(this).addClass('active');
    } else if (event.type == 'mouseleave') {
        $(this).removeClass('active');
    }
});

然而，第二个（case-switch）和最后一个（no on()）几乎一样快

$('#main .myElement').click(function(event) {
    return false;
}).mouseenter(function(event) {
    $(this).addClass('active');
}).mouseleave(function(event) {
    $(this).removeClass('active');
});
于 2013-06-21T07:18:50.457 回答