jQuery绑定单击事件最佳实践 [英] jQuery binding click event best practices

问题描述

最近在jQuery中绑定单击事件时，我发现自己在质疑是否使用jQuery快捷方式click()还是我应该指定.on('click', ...)调用自己.

Lately when binding click events in jQuery I find myself questioning whether to use the jQuery shortcut click() or if I should specify the .on('click', ...) call myself.

jQuery中的 .click().函数只是一个快捷方式.对我来说，使用它是有意义的，因为jQuery处理了幕后的所有事情，从而说明了所使用的jQuery版本所采用的首选方法.当我从jQuery 1.6-> 1.7升级脚本时，我知道所有click()都已从bind()的快捷方式变为首选的on()方法.仅此一点，似乎足以使用快捷方式.

The .click(). function in jQuery is just a shortcut. To me it makes sense to use because jQuery handles everything behind the scenes accounting for the preferred method per the version of jQuery being used. When I upgraded my scripts from jQuery 1.6 -> 1.7 I know that all of my click()s went from being a shortcut to bind() to the preferred on() method. This, alone, seems reason enough to use the shortcuts.

...但是....

我非常敬重的特雷弗·伯纳姆(Trevor Burnham)在他的电子书异步Java 中说，他

Trevor Burnham, whom I greatly respect, says in his eBook Async Javascript that he

...希望始终使用功能更强大的bind/on)(过点击)

... prefer(s) to consistently use the more powerful bind/on) (over click)

这让我感到困惑，我想知道为什么使用bind/on更强大".

That confuses me and I was wondering why using bind/on is 'more powerful'.

在绑定具有jQuery快捷方式的事件时，您发现什么是最佳实践?使用快捷方式还是自己做?

What have you found to be the best practices when binding events that have shortcuts in jQuery? Use the shortcut or do it yourself?

推荐答案

我认为这与个人喜好和代码可读性的关系比什么都重要.

到目前为止，更强大的功能.on使您可以委派事件，而快捷方式始终直接在元素上操作.例如，$('body').on('click', '.button', function(){});将对每个.button元素都起作用，即使使用ajax或其他事实之后添加的元素也是如此.虽然快捷方式无法做到这一点，但$('.button').click(function(){});是向.button添加侦听器的唯一方法，并且不具有委派功能，因此以后添加的.button元素将没有此绑定.

As far a more powerful goes .on lets you delegate events while shortcuts always operate on the element directly. For example $('body').on('click', '.button', function(){}); will work for every .button element even those added after the fact with ajax or otherwise. While the shortcut cannot do this $('.button').click(function(){}); is the only way to add a listener to .button and does not feature delegation, so .button elements added later will not have this binding.

在多个元素上进行直接未委托事件(如快捷方式)的效率也比在父对象上委托事件的效率稍低.例如:假设页面上有15个.button元素，$('.button').click(...将遍历所有15个元素，并为每个元素添加一个事件侦听器；但是$('#parentElem').on('click', '.button', ...会将一个事件侦听器简单地附加到#parentElem上，以检查目标，因此，一个附加和一个侦听器，以及一个循环和15个侦听器.

Direct un-delegated events (like shortcuts) on multiple elements is also slightly less efficient then delegated events on a parent object. For example: lets say there are 15 .button elements on the page, $('.button').click(... will loop through all 15 elements and add an event listener to each; however $('#parentElem').on('click', '.button', ... will simply attach a single event listener to #parentElem that checks on the target, so one attach and one listener, vs a loop and 15 listeners.

最后，.on的优点是允许您将多个事件中的一个函数附加到元素上，而快捷键则无法实现，例如:$('.button').on('click mouseover keyup', ...该函数将通过单击，鼠标悬停或键入来触发！

And finally, .on has the advantage of allowing you to attach a function to an element from multiple events, which is not possible with shortcuts, for example: $('.button').on('click mouseover keyup', ... the function will trigger with click, mouseover or keyup!

再次说一个名为#parent

快捷方式处理程序:

 $('.button').click(turnRed);
 $('.button').mouseover(turnRed);
 $('.button').keyup(turnRed);

 function turnRed(){
      $(this).css('color','red');
 }

• 创建了4个jQuery对象(是的，我知道您可以将其缓存到2个对象，但这是一个示例)
• 3个元素循环(每个循环15个)，因此jQuery在此处命中元素45次并附加了侦听器
• 总共45个事件侦听器
添加到场景中的
• 未来.button元素不会turnRed
• 4 jQuery objects created (yes I know you could cache it to 2 objects but this is an example)
• 3 element loops of 15 each, so jQuery hits elements here 45 times and attaches listeners
• 45 total event listeners
• future .button elements added to the scene do not turnRed

.on处理程序:

 $('#parent').on('click mouseover keyup', '.button', turnRed);

 function turnRed(){
      $(this).css('color','red');
 }

• 创建了2个jQuery对象
• 没有元素循环，因此jQuery一次命中元素
• 总共3个事件侦听器
• 将来的.button元素添加到场景中实际上会turnRed
• 2 jQuery objects created
• No element loop, so jQuery hits elements once
• 3 total event listeners
• future .button elements add to the scene will in fact turnRed

.on显然具有优势

如果您的情况比这简单，那么.on的优势可能对您没有影响，而快捷方式可能更易读，因此可能是首选.

If your situation is simpler than this, then the advantage of .on may not make a difference to you, and the shortcut may be preferred as its more readable.

$('#button').click(...几乎与$('#button').on('click', ...相同(请参阅@FabrícioMatté的答案)，如果我们只想向一个事件添加一个侦听器，则.on的作用是有争议的.

$('#button').click(... is nearly identical to $('#button').on('click', ... (see @Fabrício Matté's answer) and if we just want to add one listener to one event, the .on's power is a moot point.

就个人而言，因为有时候我想获得.on的优势，所以我总是使用.on只是为了保持一致.

Personally because there are times when I want the advantage of .on I always use .on just to be consistent.

这篇关于jQuery绑定单击事件最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！