jQuery绑定(bind)点击事件最佳实践

Question

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

.click(). jQuery 中的函数只是一个快捷方式。对我来说，使用它是有意义的，因为 jQuery 处理幕后的所有事情，并根据所使用的 jQuery 版本考虑首选方法。当我从 jQuery 1.6 -> 1.7 升级我的脚本时，我知道我所有的 click() s 从快捷方式变为 bind()到首选on()方法。仅此一点似乎就足以成为使用快捷方式的理由。

...但是...

我非常尊敬的特雷弗·伯纳姆 (Trevor Burnham) 在他的电子书中说道 Async Javascript那个他

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

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

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

Answer 1

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

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

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

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

<小时/>

再次假设名为 #parent 的 div 中有 15 个 .button 元素

快捷方式处理程序:

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

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

• 创建了 4 个 jQuery 对象(是的，我知道您可以将其缓存到 2 个对象，但这只是一个示例)
• 3 个元素循环，每个循环 15 个，因此 jQuery 在这里点击元素 45 次并附加监听器
• 总共 45 个事件监听器
• 添加到场景中的 future .button元素不会变成红色

.on 处理程序:

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

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

• 创建了 2 个 jQuery 对象
• 没有元素循环，因此 jQuery 会命中元素一次
• 总共 3 个事件监听器
• future 添加到场景中的 .button 元素实际上会变成红色

这里.on显然有优势

<小时/>

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

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

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