对所有事件使用jQuery .on()

Question

.on()对每个事件使用jQuery的事件处理程序被认为是不好的做法吗？

以前,我的代码包含这样的脚本:

$('#cartButton').click(function(){
    openCart();
});

但是我最近开始使用InstantClick(一个pjax jQuery插件).

现在我的脚本都没有用.我理解为什么会发生这种情况,但我不能用代码包装我的代码,InstantClick.on('change', function(){因为这意味着我的代码开始重复.例如,单击购物车按钮将openCart()多次运行该功能.所以为了解决这个问题,我将所有功能都改为:

$(document).on('click', '#cartButton', function(){
    openCart();
});

我很好奇这是否会增加加载时间并导致过度拉紧.on()在我的代码中为每个事件使用事件处理程序是不好的做法吗？

Answer 1

这根本不是很糟糕的做法..

.on是处理所有事件的首选方法,使用.click只是一个传递给.on方法的快捷方式..

如果您在此处查看(jquery 2.1.0的未经授权的源代码):https://code.jquery.com/jquery-2.1.0.js

这里有几个笔记:

1. 搜索此行: on: function( types, selector, data, fn, /*INTERNAL*/ one ) {

   这是on方法的函数定义,只显示代码正在做什么.

2. 也搜索这一行: jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick "

   此行下面的代码是映射所有可直接调用的快捷方式(如click),并向您显示它们只是映射到'on'方法.

希望这可以帮助!!!

Answer 2

不,这不是一个坏的做法.on(),实际上如果你检查功能的来源.click(),你会看到它实际上调用.on().

但是......不应该创建一个匿名函数,而应该简单地执行此操作,这样会更干净,速度更快:

$(document).on('click', '#cartButton', openCart);

和

$('#cartButton').click(openCart);