Question

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

jQuery中的.click().函数只是一个捷径。对我来说，使用它是有道理的，因为jQuery会根据所使用的jQuery版本来处理幕后的所有内容。当我从jQuery 1.6升级我的脚本时 - ＆gt; 1.7我知道我的所有click()都是从bind()的快捷方式转到首选的on()方法。仅此一点似乎足以使用快捷方式。

...然而....

我极为尊重的特雷弗伯纳姆在他的电子书Async Javascript中说他

...更喜欢一致地使用更强大的bind / on）（过度点击）

这让我很困惑，我想知道为什么使用bind / on会“更强大”。

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

Answer 1

我认为这与个人偏好和代码可读性有关。

更强大的功能.on允许您委派事件，而快捷方式始终直接对元素进行操作。例如，$('body').on('click', '.button', function(){});将适用于每个.button元素，即使是在事后使用ajax或其他方式添加的元素。虽然快捷方式无法执行此操作$('.button').click(function(){});是将侦听器添加到.button并且不具有委派功能的唯一方法，因此稍后添加的.button元素将不具有此绑定。

对多个元素的直接未委托事件（如快捷方式）的效率也略低于父对象上的委托事件。例如：假设页面上有15个.button元素，$('.button').click(...将遍历所有15个元素并为每个元素添加一个事件监听器;但是$('#parentElem').on('click', '.button', ...只会将一个事件监听器附加到#parentElem，以检查目标，因此一个附加和一个监听器，一个循环和15个监听器。

最后，.on的优点是允许您将函数附加到多个事件的元素中，这对于快捷方式是不可能的，例如：$('.button').on('click mouseover keyup', ...该函数将通过单击触发， mouseover或keyup！

再次说一个名为.button

的div中有15个#parent个元素

快捷方式处理程序：

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

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

创建了4个jQuery对象（是的，我知道你可以将它缓存到2个对象，但这是一个例子）
每个15个元素循环，因此jQuery在这里点击元素45次并附加监听器
共有45名活动听众
添加到场景中的未来.button元素不会turnRed

.on处理程序：

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

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

创建了2个jQuery对象
没有元素循环，所以jQuery一次点击元素
3个完整的事件监听器
未来.button元素添加到场景中实际上将turnRed

这里.on明显具有优势

如果您的情况比这更简单，那么.on的优势可能对您没有影响，并且快捷方式可能更受欢迎，因为它更具可读性。

$('#button').click(...几乎与$('#button').on('click', ...相同（请参阅@FabrícioMatté的回答）如果我们只想为一个事件添加一个监听器，那么.on的权力就没有实际意义了。

就个人而言，有时因为我希望.on的优势，我总是使用.on来保持一致。

Answer 2

您可以快速查看source并亲自了解您的函数调用实际执行的操作。

在jQuery对象'extend（第3754行）中，jQuery在第3909行迭代所有这些方法名称：

模糊焦点焦点焦点加载调整大小滚动卸载单击dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave 更改选择提交keydown按键keyup错误contextmenu

创建调用给定方法的.on方法的速记方法，而不调用这些方法时传递选择器属性（第3921行）：

this.on( name, null, data, fn )

这意味着它将具有无事件委派效果。

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

调用

之间的唯一区别

$(selector).eventname(function(){...})

和

$(selector).on('eventname', function(){...})

这是简写方法是否有另一个函数调用的开销（这可以忽略不计）。

更新：使用Grunt进行jQuery的自定义构建时，可以使用custom:-event-alias参数排除速记方法，以获得更小的构建（Docs here）。虽然，我个人倾向于坚持使用CDN版本。

至于事件委派的工作方式以及何时首选，请查看docs和@Fresheyeball's answer。

jQuery绑定点击事件最佳实践

2 个答案: