Javascript 的addEventListener()及attachEvent()区别分析

最新推荐文章于 2024-09-13 08:33:26 发布

iteye_6481

最新推荐文章于 2024-09-13 08:33:26 发布

阅读量82

点赞数

文章标签： javascript ViewUI

大家都知道事件的用法就是当某个事件被触发了之后就会去执行某个Function。

Mozilla中：（严格遵守W3C标准）

target.addEventListener(type, listener,useCapture);

target：文档节点、document、window 或 XMLHttpRequest。

type：字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。

listener ：实现了 EventListener 接口或者是JavaScript中的函数。

useCapture ： True表示用capture, False则是bubble 。capture与bubble分别是W3C制定得两种时间模式,简单来说capture就是从document的开始读到最后一行,再执行事件,而bubble则是先寻找指定的位置再执行事件.

IE中：

target.attachEvent(type,listener);

target：文档节点、document、window 或 XMLHttpRequest。

type：字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。

listener ：实现了 EventListener 接口或者是JavaScript中的函数。

IE中总是认为该方法的第三个参数为bubble。

例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

两者使用的原理不同：执行的优先级不一样

下面实例讲解如下：

document.getElementById("btn").οnclick= method1;

document.getElementById("btn").οnclick= method2;

document.getElementById("btn").οnclick= method3;如果这样写,那么将会只有medhot3被执行

写成这样：

varbtn1Obj = document.getElementById("btn1");

btn1Obj.attachEvent("onclick",method1);

btn1Obj.attachEvent("onclick",method2);

btn1Obj.attachEvent("onclick",method3);执行顺序为method3->method2->method1

addEventListenervar btn1Obj =document.getElementById("btn1");

btn1Obj.addEventListener("click",method1,false);

btn1Obj.addEventListener("click",method2,false);

btn1Obj.addEventListener("click",method3,false);执行顺序为method1->method2->method3

由于存在区别，所以编写JS时，需要进行能力检测：

（浏览器厂商不能达成一致，形成标准，给程序员带来了麻烦）

实例：(要注意的是div必须放到js前面才行)

<html> 
<head> 
</head> 
<body> 
<div id="name1" style="border:1px solidred;padding:10px 10px 10px 10px;" style="border:1px solidred;padding:10px 10px 10px 10px;"> 
<div id="name2" style="border:1pxsolid green;padding:10px 10px 10px 10px;" style="border:1px solidgreen;padding:10px 10px 10px 10px;">点击</div> 
</div> 
 
<div id="info"></div> 
 
<script type="text/javascript"><!-- 
var name1=document.getElementById('name1');
var name2=document.getElementById('name2');
var info=document.getElementById('info'); 
 
if(name1.attachEvent){ //如果不为空，则是IE浏览器 
name1.attachEvent('onclick',function () { info.innerHTML +="红色" + "<br>"; }); 
name2.attachEvent('onclick',function () { info.innerHTML +="绿色" + "<br>"; }); 
}else{  // 否则，为遵守W3C标准的浏览器
name1.addEventListener('click',function () { info.innerHTML += "红色" + "<br>"; },false); 
name2.addEventListener('click',function () { info.innerHTML += "绿色" + "<br>"; },false); 
} 
// --></script> 
</body> 
</html>

思想层次看

可以动态的把自定义函数绑定到某事件上，这是非常灵活的，再现“变是不变的”道理，所以他非常受到欢迎。

虽然制定了W3C标准，但强大的微软却不严格遵守，虽然招来程序员的责骂，惹来同行的痛斥，但人们也不得不接受它，因为“流氓会武术，谁也挡不住”。