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

Is it considered bad practice to use jQuery's .on() event handler for every event?

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

Previously, my code contained script like this:

之前，我的代码包含如下脚本:

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

However I've recently started using InstantClick (a pjax jQuery plugin).

然而，我最近开始使用InstantClick(一个pjax jQuery插件)。

Now none of my scripts work. I understand why this is happening, but I cannot wrap my code with the InstantClick.on('change', function(){ tag as this means my code starts to repeat itself. For example, clicking on the cart button will run the openCart() function many times. So to get around this, I'm changing all my functions to something like this:

现在我的脚本都不起作用了。我理解为什么会发生这种情况，但是我不能用InstantClick来包装我的代码。在('change'， function(){tag，因为这意味着我的代码开始重复自己。例如，单击cart按钮将多次运行openCart()函数。为了解决这个问题，我把所有的函数都改成这样

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

I'm curious as to whether this will increase loading times and cause excess strain. Is it bad practice to use the on() event handler for every event in my code?

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

2 个解决方案

#1

It's not bad practice at all..

这一点也不坏。

.on is the preferred method for handling all events, and using .click is just a shortcut that gets passed to the .on method anyway..

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

If you check out here (unminified source for jquery 2.1.0): https://code.jquery.com/jquery-2.1.0.js

如果您在这里查看(jquery 2.1.0的未缩小源代码):https://code.jquery.com/jquery-2.1.0.js

Here are a couple notes:

以下是一些注意事项:

search for this line: on: function( types, selector, data, fn, /*INTERNAL*/ one ) {

搜索这一行:on:函数(类型、选择器、数据、fn、/*内部*/ 1)

This is the function definition for the on method and just shows you what the code is doing..

这是on方法的函数定义，它只是向您展示代码在做什么。
also search for this line: jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick "

也可以搜索这一行:jQuery。每个(“模糊焦点焦点在focusin focusout load resize滚动卸载点击dblclick”)

Th code below this line is mapping all the directly callable shortcuts (like click) and shows you that they are just mapping to the 'on' method.

下面的代码将映射所有直接可调用的快捷方式(如click)，并向您显示它们只是映射到“on”方法。

Hope this helps!!!

希望这有助于! ! !

#2

No it is not a bad practice to use .on(), actually if you check the source of the .click() function, you'll see that it actually calls .on().

实际上，如果您检查.click()函数的源代码，您将看到它实际上调用了。on()。

But... Instead of creating an anonymous function, you should simply do this, which would be cleaner, and slightly faster:

但是…与其创建一个匿名函数，不如直接这样做，这样会更简洁，速度更快:

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

and

和

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

#1