js监听事件 (addEventListener()) 和普通事件( onclick() )的区别

研究事件冒泡时，发现一个问题，某些情况下，addEventListener() 要做的事，onclick也能做
引发了我一个思考，这两个有什么区别？

区别：
1.onclick事件在同一时间只能指向唯一对象

2.addEventListener给一个事件注册多个listener

3.addEventListener对任何DOM都是有效的，而onclick仅限于HTML（这里的html指的是html4的标签）

4.addEventListener可以控制listener的触发阶段，（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除

5.IE9使用attachEvent和detachEvent

6.解绑：(onclick解绑，点击事件=null；监听事件解绑用removeEventListener)

// 1、普通事件解绑
window.onresize = function(event){
    event.preventDefault();
    console.log('调整浏览器窗口大小时触发resize事件');
}
window.onresize = none;


// 2、addEventListener解绑
function resizeWindow(event){
  event.preventDefault();
  console.log('调整浏览器窗口大小时触发resize事件')
}
window.addEventListener('resize', resizeWindow, false);
window.removeEventListener('resize', resizeWindow, false);
 

7、事件的多次绑定

var btn = document.getElementById("btn");
btn.onclick = function(){
	alert("你好111");
}
btn.onclick = function(){
	alert("你好222");
}

输出的结果只会有<你好222>，一个click处理器在同一时间只能指向唯一的对象。所以就算一个对象绑定了多次，其结果只会出现最后的一次绑定的对象。

事件绑定就是对于一个可以绑定的事件对象，进行多次绑定事件都能运行。代码如下

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
	alert("你好111");
},false);
btn.addEventListener("click",function(){
	alert("你好222");
},false);

运行结果会依次弹出你好111，你好222的弹出框。

总的来说：事件绑定是指把事件注册到具体的元素之上，普通事件指的是可以用来注册的事件