简单比较
|HTML | DOM0级| DOM2级|IE|
------------ | ------------- | ------------
代码形式 | <code>onclick="fun()"</code>|<code> btn.onclick = fun(){}</code>|<code>addEventListener()</code>|<code>attachEvent()</code>
作用域 | 扩展的作用域（全局）|元素的作用域|全局作用域|全局作用域
触发位置||冒泡阶段|冒泡/捕获阶段|冒泡阶段
<br />
详细分析
- HTML事件处理程序
在HTML的内联属性中添加事件处理，作为其属性的一部分，当事件发生，则执行属性中的内容。
例：//示例全部来自红宝书改编
<input type="button" value="Click" onclick="alert('Hello world!')" />
可直接在<code>onclick = ""</code>里添加执行语句，也可如下，调用一个函数
<script type="text/javascript">
function showMessage(){
alert("Hello world!"); }
</script>
<input type="button" value="Click Me" onclick="showMessage()" />
关于它的执行作用域，比较特别，是不断扩展、修改的。可以访问到document以及元素本身的成员，就像访问局部变量一样。
优势：显而易见的直观、方便，在某些情况下使用尤其便捷，比如统计某个按钮/链接的点击次数。
劣势：它的优势也仅限于此了。劣势一个是在事件与调用函数分离时，如果调用函数较晚加载，就会出现点击事件而无响应的情况。
另一个是html和javascript耦合，当需要修改时，就会一下进行两处变动，可维护性是很差的。所以一般不推荐使用这种方式。
- DOM0级事件处理程序
var btn = document.getElementById("myBtn");
btn.onclick = function(){
//操作
};
这样的处理程序，会在事件的冒泡阶段被处理。
作用域是元素的作用域，换句话说，就是程序中的 <code>this </code>引用当前元素。
优势：简单明晰，易于使用和理解。并且具有跨浏览器的优势。
劣势：代码运行以前不会指定事件处理程序,因此如果这些代码在页面中位于按钮后面,就有可能在一段时间内没有响应。
- DOM2级事件处理程序
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
alert('你点击了这里');
}, false);
addEventListener是标准的事件处理程序，提供三个参数可供传递。第一个是事件名，如<code>click</code>等；第二个是一个操作函数，即你希望事件发生后进行什么操作；第三个参数是一个布尔值，<code>true</code>表示在捕获阶段被处理，<code>fasle</code>表示在冒泡阶段被处理，考虑到IE的兼容问题，一般不使用<code>true</code>.
优势：可以为一个元素添加多个事件处理程序
- IE事件处理程序
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
alert("Clicked");
});
实际上与addEventListener的使用十分相似，区别在于，第二个参数传入的时<code>onclick</code>而并非<code>click</code>，且IE只支持在冒泡阶段进行程序处理，所以没有第三个参数布尔值的选择。
它的作用域为全局作用域，即<code>this</code>指向<code>window</code>.
此外，如果为同一个元素添加了两个事件处理程序，addEventListener会以添加的顺序依次执行事件处理，而attachEvent则相反。
总结
一般情况下为了最大限度发挥事件处理程序的作用，使用标准事件处理程序，即addEventListener，并且把第三个参数设为<code>fasle</code>；如果专门为了兼容IE，则使用attachEvent；如果是在编写一个小程序，为了简单快捷，可以使用DOM0级处理程序；最后再考虑HTML处理程序。
网友评论