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的力量是一个模糊的点.
个人因为有时我想要的优势.我总是使用,只是为了保持一致.
