在javascript或者jQuery中绑定按钮点击事件，和在HTML 标签中直接调用onclick属性有什么区别？

Question

RT，做Web开发经常能遇到需要给一个按钮绑定一个点击事件的情况。

例如HTML标签：

<button type="submit" id="foo">Bar</button>

第一种，如果使用jQuery绑定点击事件的一种做法是：

$("#foo").click(function(event) {
/* Act on the event */});

第二种，纯js的做法可以是这样：

document.getElementById('#foo').addEventListener('click', function() {
/* Act on the event */}, false);

第三种，我们也可以直接在button标签中使用onclick，例如：

<button id="foo" onclick="dosomething()">Bar</button>

同时在head或者单独的js文件中定义dosomething()

function dosomething(){/* Act on the event */}

请问从响应速度，后期维护等方面来看哪一种方法是best practice? 或者在什么情况下这几种方法最合适？

Answer 1

HTML或原生js是单一对应绑定的，绑多了只留最后一个。jQuery是追加绑定的，绑多少执行多少。这个在每一本jQuery的书中都是首先提到的事情。

在单一绑定的条件下，由于jQuery底层其实也是js实现，所以速度区别并不大。至少“绑定”这个环节并不会成为速度的瓶颈。

总有人认为jQuery只是一堆无用的语法糖……但事实上，按照二八规律，至少80%以上的程序员，在做负载等要求不那么严格的“小程序”。所以从维护的角度上，我建议用jQuery绑定，简单清楚，最容易维护。

原生js，这是真正的熟练者的工具，如果能写明白那可能更不错。

唯一不能容忍的是HTML中用onclick事件混杂js。这样做的结果就是html前端和js前端的工作混在了一起，难以分离工作任务，进而难以维护，“项目毁于各部门的扯皮和推诿之中”。这种做法临时调试可以，但如果正式成品中大范围出现，那么html和js部分的责任人都必须检讨。

Answer 2

第一种和第二种的效果是一样，可以附加多个事件处理函数，并不是只有使用jquery才能做到。 第三种方法不推荐使用，原则上HTML代码只能体现网页的结构，具体的行为应该使用javascript代码进行绑定。

除非页面上绑定事件的元素超过上万个，否则响应速度的时候就不必纠结了，只做个事件绑定还是很快的。我测试了一下，使用addEventListener绑定3000次，耗时3-4毫秒。

如果项目中统一使用jQuery的话，建议使用第一种做法，顺便还解决了IE的不兼容问题。

Answer 3

前者绑定的事件是复写的方式，后者（jQuery）是添加的方式，也就是说如果用jQuery给同一个按钮绑定两次点击事件，那么这两个事件都会被触发执行，而如果是原生js绑定的事件，则后面的会覆盖前面的

Answer 4

只知道$('#aa')返回一个包含符合条件的dom的数组，click() 可以为数组中的多个元素绑定click事件，但是html里边的onclick只能给一个dom元素绑定click事件，具体单个情况下谁快不清楚。

Answer 5

最近在读《jQuery技术内幕》。
我就背书一样给大家摘抄几句。

1. 区别

jQuery事件系统并没有将事件监听函数直接绑定到DOM元素上，而是基于数据缓存模块来管理监听函数(p350)

2.用法
$(DOM).on("click hover", handler);
支持多种事件类型

3.用法
$(DOM).on("click", ".subElem", handler);
代理机制，当触发事件作用到subElem时才绑定？（有待考究）
总之就是主元素可以代理子元素的监听事件的绑定

应该会有后续吧（总结太难，知识点太多