事件绑定和普通事件的区别

我们都知道给一个DOM节点添加事件有许多种，在不使用第三方插件的情况下我来为大家简单的分享一下，原生js的事件绑定和普通事件的区别。

普通添加事件的方法：

获取到DOM节点：var btn=document.getElementByid('ID名') //给相应的DOM节点取一个ID名。

添加事件：

btn.onclick=function(){

    alert(1)

};

btn.onclick=function(){

alert(2)

};

我们可以发现执行上边代码只会输出alert(2);

事件绑定方式添加事件：

var btn=document.getElementByid("ID名")；

btn.addEventListener("click",function(){

    alert(1);

},false);

btn.addEventListener("click",function(){

    alert(2);

},false);

执行上边代码会先输出alert(1);在输出alert(2);

注意：

普通添加事件的方法不支持添加多个事件，最下边的事件会覆盖上边的事件，而事件绑定（addEventListener）方式添加多个事件。

addEventListener不兼容低版本ie

普通事件无法取消，

addEventListener还支持事件冒泡+事件捕获。

备注：

为什么要使用addEventListener?

addEventListener是W3C DOM中提供的注册事件监听器的方法。

优点：

1.它允许给一个事件注册多个监听器。在使用DHTML库或者Mozilla extensions这样需要保证能够和其它库或者差距并存的时候非常有用。

2.它提供了一种更精细的手段控制事件监听器的触发阶段。（即可以选择捕获或者冒泡）

3.它对任何DOM元素都是有效的。而不是仅仅只对HTML元素有效。