一、原生事件绑定函数

1. addEventListener() 语法： addEventListener(type, listener[, useCapture]); type表示所监听事件类型的一个字符串，例如"click" listener是实现 EventListener 接口的一个对象或函数 useCapture*（可选）*如果值为true， useCapture 表示用户希望发起捕获。 在发起捕获之后， 只要Dom子树下发生了该事件类型，都会先被派发到该注册监听器，然后再被派发到Dom子树中的注册监听器中。并且向上冒泡的事件不会触发那些发起捕获的事件监听器

优点

• 它允许给一个事件注册多个监听器。
• 它提供了一种更精细的手段控制事件监听器的触发阶段。（即可以选择捕获或者冒泡）。
• 它对任何DOM元素都是有效的，而不仅仅只对HTML元素有效。

2.onclick 语法： .onclick = function () {}

缺点 这种方式只能绑定最后一次赋值的事件处理函数，重复赋值会覆盖旧值。

所以已经不提倡使用这种方法，应该尽量使用 addEventListener()。

二、Jquery事件绑定函数

1.bind() $('button').bind('click',function(){}); 这是最直接的方法，一般的事件绑定用这个函数就够了，但是它有一个弊端，bind将事件处理函数只绑定在了具体的元素上，而新添加的元素不会被绑定处理函数。

2.live() $('a').live('click',function(){}); live函数使用事件委托机制，所以我们要动态添加的元素指不定在dom树的哪一层。为了让所有新添加的元素都能触发预先绑定的事件处理函数，jquery将事件处理函数委派在了dom树的根元素，也就是document元素上。 这种方法解决了bind函数的问题，但是它也不是万能的，当页面上各种各样的事件很多时，如果都将其绑定到document上就会带来一定的性能消耗。

3.delegate() $('table').delegate('tr','click',function(){}); delegate 函数就是为了解决之前的 bind 和 live 的缺点，上面的代码将点击事件委托在table元素上，其下的tr元素身上的点击事件会触发处理函数。其实 delegate 函数就是能让我们自己定义绑定的元素和委托的元素，所以就完美了。

4.on() $('tr').on('click',function(){}); $('table').on('click','tr',function(){});

从1.7版本开始，jquery添加了一个 on 方法来代替之前提到的所有方法。on的使用方法很简单，像上面第一种用法就类似于bind，第二种方法就类似于 delegate。所以以后我们只需要 on 就够啦！

三、循环中的时间绑定

for (var i = 0; i <5 ; i++) {   
    inputs[i].onclick = function () {   
        alert(i);   
    }   
}  

上面代码的执行结果，无论你点击哪个按钮，它都会 alert(5)。 因为 onclick 只是事件绑定，而不是执行，所以当我们执行 onclick 事件的时候，这时的 i 已经是循环结束之后的值了。解决办法很简单，只需要我们在循环中加入闭包。

for (var i = 0, l = inputs.length; i <l; i++) {   
    (function (cur) {   
        inputs[cur].onclick = function () {   
            alert(cur);   
        }   
    })(i)   
} 

如此我们的代码就会正常工作了，如果你还有性能上的考虑还可以在加上事件委托。

拓展阅读： BIND?LIVE?DELEGATE?还是ON？–JQUERY事件绑定方法研究 浅谈 JavaScript 之事件绑定 前端进阶之路：点击事件绑定