addEventListener 和 onclick 简单比较
首先说一下addEventListener
- 语法：
element.addEventListener(event, function, useCapture) - 这里的event是事件名，function是相应的事件，这个useCapture是一个布尔值，默认是false，就是说在冒泡阶段执行，如果为true，就在捕获阶段执行
- 利用addEventListener可以简单复现网页中对一个对一个元素操作之后从window-->document-->html-->body-->...-->目标元素的捕获，然后反过来冒泡的过程
- addEventListener 是DOM2版本中加入的
绑定事件有几种方式
- Event Listeners （包含addEventListener和IE的attachEvent）
- IE 8 以及更低版本的 IE 中，需要用 attachEvent 方法：
element.attachEvent('onclick', function() { /* do stuff here*/ });- 对于 IE 9 和更高版本的 IE，以及其它浏览器，则要用 addEventListener 方法：
用上面这种方法（DOM level 2 events），理论上可以为一个元素绑定无数个事件，实际应用中则决定于客户端的电脑内存以及浏览器。element.addEventListener('click', function() { /* do stuff here*/ }, false); - Inline Events
- HTML 的 onclick="" 属性，以及 element.onclick
- 在所有支持 JavaScript 的浏览器中，可以用下面的方式来添加内联的事件监听器。
<a id="testing" href="#" onclick="alert('did stuff inline');">Click me</a>- 还有另一种方法
element.onclick = function () { /*do stuff here */ };
两种方案的区别：
要回答这个问题，就要考虑各个浏览器的兼容性，以及实际需求了。即使现在只需要为一个元素绑定一个事件，但是以后很可能还要同时再绑定别的事件，这个时候，就需要用 attachEvent 和 addEventListener 了，否则用内联方法就可以搞定了。
jQuery 以及其它的 JavaScript 框架，已经将各个浏览器的 DOM level 2 events 的实现以通用模型的形式封装起来了，所以通过 jQuery 可以很方便地写出适用于所有浏览器的代码：
$(element).on('click', function () { /* do stuff */ });
他们之间最大的区别就是addEventListener可以为一个元素绑定多个事件，即它允许给一个事件注册多个监听器，而onclik只能给元素注册一个，如果存在多个，则后面的事件会覆盖前面的
<ul id="color-list">
<li id="addEvent">red</li>
<li id="on_click">yellow</li>
</ul>
<script type="text/javascript">
(function(){
var addEvent = document.getElementById("addEvent");
addEvent.addEventListener("click",function(){
alert("我是addEvent1");
},false);
addEvent.addEventListener("click",function(){
alert("我是addEvent2");
},false);
var addEvent = document.getElementById("on_click");
on_click.onclick = function() {
alert("我是click1");
}
on_click.onclick = function() {
alert("我是click2");
}
})();
</script>
在这个例子中，red点击之后会分别弹出我是addEvent1和我是addEvent2，而yellow点击之后只会弹出我是click2。
一个适用于所有浏览器的事件监听器函数
function addEventFn (ele, event, func) {
if(ele.attachEvent) { //IE8及更低版本的浏览器
return ele.attachEvent('on'+event, func);
}
else { //IE8及以上浏览器，默认冒泡阶段
return ele.addEventListener(event, func, false);
}
}
// 调用示例
addEventFn(
document.getElementById("addEvent"),
'click',
function () {alert('red')}
)
参考文章：
