jQuery绑定点击事件最佳实践

Question

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

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

...然而....

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

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

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

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

Answer 1

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

到目前为止,更强大的功能.on允许您委派事件,而快捷方式始终直接对元素进行操作.例如$('body').on('click', '.button', function(){});,.button即使是在ajax之后添加的元素,也适用于每个元素.虽然快捷方式无法做到这$('.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个对象,但这是一个例子)
• 每个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用来保持一致.