jQuery绑定点击事件最佳做法

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

jQuery中的.click().功能只是一个捷径.对我来说,使用它是有意义的,因为jQuery处理所有后台的东西,占用每个jQuery版本的首选方法.当我将脚本从jQuery 1.6升级到> 1.7我知道我的所有click()都是从一个快捷方式bind()到首选的on()方法.这一点,似乎有足够的理由使用快捷方式.

…然而….

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

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

这让我很困惑,我想知道为什么使用bind / on是“更强大”的.

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

解决方法

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

迄今为止,功能越来越强大,您可以在快捷方式直接对元素进行操作时委派事件.例如$(‘body’).on(‘click’,’.button’,function(){});对于每一个.button元素,即使是用ajax或其他方式添加在事实之后也是如此.虽然快捷方式不能这样做$(‘.button’).click(function(){});是向.button添加一个监听器的唯一方法,不具有委托功能,所以稍后添加的.button元素将不具有此绑定.

多个元素上的直接未委派事件(如快捷方式)对父对象的委派事件的效率也略低.例如：让我们说页面上有15个.button元素,$(‘.button’).click(…将循环遍历所有15个元素,并为每个元素添加一个事件监听器;但是$(‘#parentElem’) .on(‘click’,…将简单地将一个事件监听器附加到#parentElem,检查目标,因此一个附加和一个监听器,一个循环和15个监听器.

最后,.on具有允许您从多个事件附加一个元素的功能,这不是快捷方式,例如：$(‘.button’).on(‘click mouSEOver keyup’,..该功能将通过点击,鼠标悬停或加键触发！

再说一次,div中有15个.button元素叫做#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元素添加到现场实际上会变成红色

这里显然有优势

如果你的情况比这更简单,那么.on的优点可能不会对你有所作为,而且这个捷径可能是更可读的.

$(‘#button’).点击(…几乎和$(‘#button’)相同.on(‘click’,…(见@FabrícioMatté的答案),如果我们只想添加一个监听器对于一个事件,.on的力量是一个模糊的点.

个人因为有时我想要的优势.我总是使用,只是为了保持一致.

jQuery绑定点击事件最佳做法

解决方法

相关文章