四种事件处理程序比较

简单比较

|HTML | DOM0级| DOM2级|IE|
------------ | ------------- | ------------
代码形式 | onclick="fun()"| btn.onclick = fun(){}|addEventListener()|attachEvent()
作用域 | 扩展的作用域（全局）|元素的作用域|全局作用域|全局作用域
触发位置||冒泡阶段|冒泡/捕获阶段|冒泡阶段

---

详细分析

• HTML事件处理程序
  在HTML的内联属性中添加事件处理，作为其属性的一部分，当事件发生，则执行属性中的内容。
  例：//示例全部来自红宝书改编

可直接在onclick = ""里添加执行语句，也可如下，调用一个函数

关于它的执行作用域，比较特别，是不断扩展、修改的。可以访问到document以及元素本身的成员，就像访问局部变量一样。
优势：显而易见的直观、方便，在某些情况下使用尤其便捷，比如统计某个按钮/链接的点击次数。
劣势：它的优势也仅限于此了。劣势一个是在事件与调用函数分离时，如果调用函数较晚加载，就会出现点击事件而无响应的情况。
另一个是html和javascript耦合，当需要修改时，就会一下进行两处变动，可维护性是很差的。所以一般不推荐使用这种方式。

• DOM0级事件处理程序

 var btn = document.getElementById("myBtn"); 
btn.onclick = function(){
 //操作
};

这样的处理程序，会在事件的冒泡阶段被处理。
作用域是元素的作用域，换句话说，就是程序中的 this 引用当前元素。
优势：简单明晰，易于使用和理解。并且具有跨浏览器的优势。
劣势：代码运行以前不会指定事件处理程序,因此如果这些代码在页面中位于按钮后面,就有可能在一段时间内没有响应。

• DOM2级事件处理程序

var btn = document.getElementById('btn');
btn.addEventListener('click', function(){ 
    alert('你点击了这里');
}, false);

addEventListener是标准的事件处理程序，提供三个参数可供传递。第一个是事件名，如click等；第二个是一个操作函数，即你希望事件发生后进行什么操作；第三个参数是一个布尔值，true表示在捕获阶段被处理，fasle表示在冒泡阶段被处理，考虑到IE的兼容问题，一般不使用true.
优势：可以为一个元素添加多个事件处理程序

• IE事件处理程序

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){ 
    alert("Clicked");
});

实际上与addEventListener的使用十分相似，区别在于，第二个参数传入的时onclick而并非click，且IE只支持在冒泡阶段进行程序处理，所以没有第三个参数布尔值的选择。
它的作用域为全局作用域，即this指向window.
此外，如果为同一个元素添加了两个事件处理程序，addEventListener会以添加的顺序依次执行事件处理，而attachEvent则相反。

---

总结

一般情况下为了最大限度发挥事件处理程序的作用，使用标准事件处理程序，即addEventListener，并且把第三个参数设为fasle；如果专门为了兼容IE，则使用attachEvent；如果是在编写一个小程序，为了简单快捷，可以使用DOM0级处理程序；最后再考虑HTML处理程序。