jQuery绑定点击事件最佳实践
最近在jQuery中绑定click事件时，我发现自己质疑是否使用jQuery快捷方式click()或者是否应该自己指定.on('click', ...)调用。
.click（）。 jQuery中的函数只是一个捷径。 对我来说使用是有道理的，因为jQuery会根据所使用的jQuery版本来处理幕后的所有内容。 当我从jQuery 1.6 – > 1.7升级我的脚本时，我知道我的所有click()都是从bind()的快捷方式转到首选的on()方法。 仅此一点似乎足以使用快捷方式。
…然而….
Trevor Burnham，我非常尊重他，在他的电子书Async Javascript中说他
…更喜欢一致地使用更强大的bind / on（过度点击）
这让我很困惑，我想知道为什么使用bind / on会“更强大”。
在jQuery中绑定具有快捷方式的事件时，您发现什么是最佳实践？ 使用快捷方式还是自己动手？
我认为这与个人偏好和代码可读性有关。
到目前为止，function更强大.on允许您委派事件，而快捷方式总是直接对元素进行操作。 例如$('body').on('click', '.button', function(){}); 将适用于每个.button元素，即使是那些在ajax之后添加的元素。 虽然快捷方式不能这样做$('.button').click(function(){}); 是向.button添加侦听器的唯一方法，并且不具有委托function，因此.button添加的.button元素将不具有此绑定。
多个元素上的直接未委托事件（如快捷方式）与父对象上的委托事件相比效率稍低。 例如：假设页面上有15个.button元素， $('.button').click(...将遍历所有15个元素并为每个元素添加一个事件监听器;但是$('#parentElem').on('click', '.button', ...只会将一个事件监听器附加到#parentElem ，以检查目标，因此一个附加和一个监听器，一个循环和15个监听器。
最后， .on的优点是允许您将函数附加到多个事件的元素中，这对于快捷方式是不可能的，例如： $('.button').on('click mouseover keyup', ...该function将通过点击，鼠标hover或键盘触发！
让我们再说一个名为#parent的div中有15个.button元素
快捷键处理程序：
$('.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', ...相同.on $('#button').on('click', ... （参见@FabrícioMatté的回答）如果我们只想添加一个监听器对于一个事件， .on的权力是一个没有实际意义的点。
我个人因为有时候我想要的优势。我总是使用.on只是为了保持一致。
您可以快速查看源代码并亲自查看函数调用实际执行的操作。
在jQuery对象的extend （第3754行）中，jQuery在第3909行迭代所有这些方法名称：
模糊焦点焦点焦点加载resize滚动卸载单击dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave更改选择提交keydown按键keyup错误上下文菜单
创建调用给定方法的.on方法的速记方法，而不调用这些方法时传递选择器属性（第3921行）：
this.on( name, null, data, fn )
这只是意味着它没有事件委托效应。
在jQuery中绑定具有快捷方式的事件时，您发现什么是最佳实践？ 使用快捷方式还是自己动手？
呼唤之间的唯一区别
$(selector).eventname(function(){...})
和
$(selector).on('eventname', function(){...})
这是简写方法有另一个函数调用的开销（这是可以忽略不计的最小）。
更新：使用Grunt进行jQuery的自定义构建时，可以使用custom:-event-alias参数排除速记方法，以获得更小的构建（ 此处为Docs ）。 虽然，我个人倾向于坚持使用CDN版本。
至于事件委托如何工作以及何时首选，请查看文档和@Fresheyeball的答案 。