四种事件处理程序比较

简单比较

|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处理程序。

推荐阅读更多精彩内容

  • 声明:本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下(...
    angryyan阅读 5,157评论 1 6
  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 1,036评论 3 11
  • 1.事件代理 事件代理:为子元素添加监听器转变为为父容器添加监听器,然后通过event.target判断具体操作的...
    IT男的成长记录阅读 155评论 0 0
  • 事件流: 事件流:页面接收事件的顺序。 IE定义的:事件冒泡流(由最具体的元素依次传播到DOM树的最上层的Docu...
    xiaoguo16阅读 281评论 0 0
  • 一、问答 1. dom对象的innerText和innerHTML有什么区别? innerHTML: 也就是从对象...
    饥人谷_罗伟恩阅读 341评论 0 2
  • 最近,我发现了一件很恐怖的事情。 五四青年节,学校里举行成人仪式。看到妈妈或者爸爸牵着孩子的手,走在红地毯,我突然...
    锦瑟_db50阅读 87评论 1 1
  • 每个人都有一个武侠梦,而有人的地方就有江湖! 我是琅琊阁主:冷眼观史 阁中一展琅琊榜,举世当殊豪杰情! 琅琊阁,琅...
    冷眼观史阅读 2,239评论 29 61
  • 樱花满地谁留殇, 心中伤痕谁作孽。 莫愁,莫愁! 前路无坎不精彩, 多姿多味要看开。 无悔,无悔! 对错之前易筹措...
    幻城彡小孩无爱阅读 63评论 2 2