19

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

.click ()。jQuery 中的函数只是一个捷径。对我来说，使用它是有意义的，因为 jQuery 会在幕后处理所有使用的 jQuery 版本的首选方法。当我从 jQuery 1.6 -> 1.7 升级我的脚本时，我知道我所有的click()s 从一个快捷方式变成bind()了首选on()方法。仅凭这一点，似乎就有足够的理由使用这些快捷方式。

...然而....

我非常尊敬的 Trevor Burnham 在他的电子书Async Javascript中说，他

...更喜欢始终使用更强大的绑定/打开）（点击）

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

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

4

2 回答 2

47

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

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

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

最后，.on它的优点是允许您从多个事件中将一个函数附加到一个元素，这是使用快捷方式无法实现的，例如：$('.button').on('click mouseover keyup', ...该函数将通过单击、鼠标悬停或按键触发！

.button让我们再次说在一个名为 div 中有 15 个元素#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

.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ício Matté 的回答）相同，如果我们只想为一个事件添加一个侦听器，那么.on' 的力量是一个有争议的问题。

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

于 2012-07-19T00:13:49.593 回答
1

您可以快速查看源代码，并亲自了解您的函数调用实际上做了什么。

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

模糊焦点 focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu

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

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

这只是意味着它不会有事件委托效果。

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

调用之间的唯一区别

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

和

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

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

更新：当使用 Grunt 自定义构建 jQuery 时，可以使用custom:-event-alias参数排除速记方法，以获得更小的构建（此处的文档）。不过，我个人倾向于坚持使用 CDN 构建。

至于事件委托的工作方式和首选方式，请查看文档和@Fresheyeball 的答案。

于 2012-07-19T00:46:10.797 回答