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

时间:2022-04-12 19:35:36

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

Mozilla中: 


addEventListener的使用方式: 


target.addEventListener(type, listener, useCapture); 


target: 文档节点、document、window 或 XMLHttpRequest。 
type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。 
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 
useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false); 


IE中: 


target.attachEvent(type, listener); 
target: 文档节点、document、window 或 XMLHttpRequest。 
type: 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。 
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 例如:document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);}); 


W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下: 


W3C格式: 


removeEventListener(event,function,capture/bubble); 


Windows IE的格式如下: 


detachEvent(event,function); 




target.addEventListener(type, listener, useCapture); 
target 文档节点、document、window 或 XMLHttpRequest。 
type 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。 
listener 实现了 EventListener 接口或者是 JavaScript 中的函数。 
useCapture 是否使用捕捉,看了后面的事件流一节后就明白了,一般用 false 
事件触发时,会将一个 Event 对象传递给事件处理程序,比如: 
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false); 
适应的浏览器版本不同,同时在使用的过程中要注意 
attachEvent方法 按钮onclick IE中使用 
addEventListener方法 按钮click fox中使用 
两者使用的原理:可对执行的优先级不一样,下面实例讲解如下: 
attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列) 
addEventListener方法 用于 Mozilla系列 
举例: document.getElementById("btn").onclick = method1; 
document.getElementById("btn").onclick = method2; 
document.getElementById("btn").onclick = method3;如果这样写,那么将会只有medhot3被执行 
写成这样: 
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function); 
btn1Obj.attachEvent("onclick",method1); 
btn1Obj.attachEvent("onclick",method2); 
btn1Obj.attachEvent("onclick",method3);执行顺序为method3->method2->method1 
如果是Mozilla系列,并不支持该方法,需要用到addEventListener var btn1Obj = document.getElementById("btn1"); 
//element.addEventListener(type,listener,useCapture); 
btn1Obj.addEventListener("click",method1,false); 
btn1Obj.addEventListener("click",method2,false); 
btn1Obj.addEventListener("click",method3,false);执行顺序为method1->method2->method3 
实例:(要注意的是div必须放到js前面才行) 
复制代码 代码如下:
<html> 
<head> 
</head> 
<body> 
<div id="name1" style="border:1px solid red;padding:10px 10px 10px 10px;" style="border:1px solid red;padding:10px 10px 10px 10px;"> 
<div id="name2" style="border:1px solid green;padding:10px 10px 10px 10px;" style="border:1px solid green;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){ //对于attachEvent前面的target我们一定要保证不为空 
name1.attachEvent('onclick',function () { info.innerHTML += "红色" + "<br>"; }); 
name2.attachEvent('onclick',function () { info.innerHTML += "绿色" + "<br>"; }); 
}else{ 
name1.addEventListener('click',function () { info.innerHTML += "红色" + "<br>"; },false); 
name2.addEventListener('click',function () { info.innerHTML += "绿色" + "<br>"; },false); 

// --></script> 
</body> 
</html> 




从W3C的发展时间轴来看, DOM(Document Object Model)的模型可以分为两种, DOM 0 及 DOM 2. 从数字来看就可以知道DOM 0 当然是比较旧的协议, 我们可以从以下的表格来看:


DOM1 协定:




 
Event Name
 Description
 
onblur()
 The element has lost focus (that is, it is not selected by the user).
 
onchange0
 The element has either changed (such as by typing into a text field) or the element has lost focus.
 
onclick0
 The mouse has been clicked on an element.
 
ondblclick()
 The mouse has been double-clicked on an element.
 
onfocus()
 The element has gotten focus.
 
onkeydown()
 A keyboard key has been pressed down (as opposed to released) while the element has focus.
 
onkeypress()
 A keyboard key has been pressed while the element has focus.
 
onkeyup()
 A keyboard key has been released while the element has focus.
 
onload()
 The element has loaded (document, frameset, or image).
 
onmousedown()
 A mouse button has been pressed.
 
onmousemove()
 The mouse has been moved.
 
onmouseout()
 The mouse has been moved off of or away from an element.
 
onmouseover()
 The mouse has moved over an element.
 
onmouseup()
 A mouse button has been released.
 
onreset()
 The form element has been reset, such as when a form reset button is pressed.
 
onresize()
 The window's size has been changed.
 
onselect()
 The text of a form element has been selected.
 
onsubmit()
 The form has been submitted.
 
onunload()
 The document or frameset has been unloaded.
 




DOM2 的进化:


DOM 0 Event
 DOM 2 Event
 
onblur()
 blur
 
onfocus()
 focus
 
onchange()
 change
 
onmouseover()
 mouseover
 
onmouseout()
 mouseout
 
onmousemove()
 mousemove
 
onmousedown()
 mousedown
 
onmouseup()
 mouseup
 
onclick()
 click
 
ondblclick()
 dblclick
 
onkeydown()
 keydown
 
onkeyup()
 keyup
 
onkeypress()
 keypress
 
onsubmit()
 submit
 
onload()
 load
 
onunload()
 unload
 


 新的DOM2 用法可以addEventListener()这个函数来观察到:


addEventListener(event,function,capture/bubble);


参数event如上表所示, function是要执行的函数, capture与bubble分别是W3C制定得两种时间模式,简单来说capture就是从document的开始读到最后一行, 再执行事件, 而bubble则是先寻找指定的位置再执行事件.
capture/bubble的参数是布尔值, True表示用capture, False则是bubble.Windows Internet Explorer也有制定一种EventHandler, 是 attachEvent(), 格式如下:


window.attachEvent(”submit”,myFunction());


比较特别的是attachEvent不需要指定capture/bubble的参数, 因为在windows IE环境下都是使用Bubble的模式.这里用图像的Rollover例子来表现事件的用法:


<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd“>
<html>
<head>
<title>Rollover</title>
<script type=”text/javascript”>function moveOver(imgObj) {
  if (typeof window.addEventListener != “undefined”) {
  imgObj.addEventListener(”mouseover”,function(){imgObj.src = imgObj.id +
“_over.png”;}, false);
  imgObj.addEventListener(”mouseout”, function(){imgObj.src = imgObj.id +
“_default.png”;}, false);
  } else {
  imgObj.attachEvent(”onmouseover”,function(){imgObj.src = imgObj.id +
“_over.png”;});
  imgObj.attachEvent(”onmouseout”, function(){imgObj.src = imgObj.id +
“_default.png”;});
  }
}


function rollover() {
var images = document.getElementsByTagName(”img”);
var roll = new RegExp (”rollover”);
var preload = [];
for (var i = 0; i < images.length; i++) {
  if (images[i].id.match(roll)) {
  preload[i] = new Image();
  preload[i].src = images[i].id + “_over.png”;


  moveOver(images[i]);
  }
}
}
if (typeof window.addEventListener != “undefined”) {
  window.addEventListener(”load”,rollover,false);
} else {
  window.attachEvent(”onload”,rollover)
}
</script>
</head>
<body>
<p><img id=”rollover_home” name=”img_home” src=”rollover_home_default.png”
alt=”Home”></p>
<p><img id=”rollover_about” name=”img_about” src=”rollover_about_default.png”
alt=”About”></p>
<p><img id=”rollover_blog” name=”img_blog” src=”rollover_blog_default.png”
alt=”Blog”></p>
<p><img id=”logo” name=”img_logo” src=”logo.png” alt=”Braingia Logo”></p>
</body>
</html>


上述的 typeof window.addEventListener != “undefined” 程序代码可以判断使用者的浏览器是否支持AddEventListener这个事件模型, 如果不支持就使用attachEvent.


W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:


W3C格式:


removeEventListener(event,function,capture/bubble);


Windows IE的格式如下:


detachEvent(event,function);


---------------------------------------------——————————————————————————————————————————————————————————

attachEvent和addEventListener详解  

2010-12-08 13:23:41|  分类: JavaScript|举报|字号 订阅

 

attachEvent和addEventListener详解,开始了!

先介绍 attachEvent:

attachEvent方法可以动态的为网页内的元素添加一个事件.通常你想为某个按扭添加一个单击事件时.你都会在按扭内写上onclick=事件名称.使用attachEvent则不必这样做.你把写好的事件准备好,在需要的时候给元素绑定上再执行.而且attachEvent支持为某个元素绑定多个事件.执行顺序是,后绑定的先执行.
那么我在什么时候使用该方法呢,当然在你需要时.不过如今的Web2.0追求的是分离式开发技术.也就是说你在网页内看不到一句JavaScript语句,却在该页中使用了大量JavaScript技术.这就是高手们所谓的分离式开发技术.让前端的显示和程序逻辑分离开来.
如果想删除事件请使用detachEvent
attachEvent方法只支持IE浏览器.与其功能相同的指令是addEventListener,该指令支持FF等浏览器,并且是W3C标准
具体请参看下面实例.


语法:Element.attachEvent(Etype,EventName)

返回值:[tag:return_value /]
参数Element:要为该元素动态添加一个事件.
Etype:指定事件类型.比如:onclick,onkeyup,onmousemove等..
EventName:指定事件名称.也就是你写好的函数.


attachEvent实例

<html>
<head>
<title>attachEvent方法使用实例</title>
</head>
<body>
<input id="a" type="button" value="点我" />注意该按扭没有任何事件<br/>
<input id="b" type="button" value="点我绑定事件" onclick="att_Event()" />点击该按扭为上面的按扭添加一个事件.
<center><h3>重点提示:你可以尝试多次点击绑定事件,最上面的那个按扭就会绑定多个事件.比如你点击三次绑定.你再点击最上面的按扭,他就会执行三次弹出框.这就是我说的attachEvent方法支持为某个元素绑定多个事件.当然在实际开发中,你可以根据实际情况,来为他绑定多个不同的事件!
<script language="javascript">
function att_Event(){
var a = document.getElementById("a");
a.value = "点我有事件";
a.attachEvent("onclick",Hello_ok);
}

function Hello_ok(){
alert("您好,欢迎来到jiang_yy_jiang的技术空间!本空间的发展离不开您的支持,谢谢您光临!");
}
</script>
</body>
</html>

接下来:addEventListener

addEventListener方法与attachEvent方法功能相同.但是addEventListener是W3C标准,而attachEvent非W3C标准,且只支持IE浏览器.
虽然addEventListener属于标准方法,但依然无法在IE下运行.IE不支持该方法.
addEventListener带有三个参数.必须设置.缺一不可.
addEventListener可以为网页内某个元素动态绑定一个事件.事件类型可随意指定.如:click,mousemove,keyup等.
通常你想为某个按扭添加一个单击事件时.你都会在按扭内写上onclick=事件名称.使用addEventListener则不必这样做.你把写好的事件准备好,在需要的时候给元素绑定上再执行.而且addEventListener支持为某个元素绑定多个事件.执行顺序是,先绑定的先执行.
那么我在什么时候使用该方法呢,当然在你需要时.不过如今的Web2.0追求的是分离式开发技术.也就是说你在网页内看不到一句JavaScript语句,却在该页中使用了大量JavaScript技术.这就是高手们所谓的分离式开发技术.让前端的显示和程序逻辑分离开来.
如果想删除事件请使用removeEventListener
经过我测试该方法支持FireFox(火狐浏览器).不支持IE,具体请参看下面实例.

语法:Element.addEventListener(Etype,EventName,boole)返回值:[tag:return_value /]
参数Element:要为该元素绑定一个事件.可以是任意的html元素.
Etype:事件类型.比如:click,keyup,mousemove.注意使用addEventListener绑定事件时,设置参数事件类型时不必写on.否则会出错.
EventName:要绑定事件的名称.也就是你写好的函数.
boole:该参数是一个布尔值:false或true必须填写.false代表支持浏览器事件捕获功能,true代表支持浏览事件冒泡功能.
addEventListener实例<html>
<head>
<title>addEventListener方法使用实例</title>
</head>
<body>
<input id="a" type="button" value="点我" />注意执行网页时该按扭并没有事件<br/>
<input id="b" type="button" value="点我绑定事件" onclick="add_Event()" />点击该按扭为上面的按扭绑定事件<br/>
<h3>注意该实例必须在FireFox(火狐浏览器下运行).你可以根据实际情况,来为他绑定多个不同的事件!addEventListener与<a href="http://hi.baidu.com/jiang_yy_jiang">attachevent</a>不一样的是,该方法不可以把同一事件绑定多次,但支持把不同的事件绑定到一个元素.请使用非IE浏览器测试该例。</h3>
<script language="javascript">
function add_Event(){
var a = document.getElementById("a");
a.value="点我有事件";
a.addEventListener("click",Hello_ok,false);
}

function Hello_ok(){
alert("您好!欢迎来到jiang_yy_jiang的技术空间!本空间的发展离不开您的支持,谢谢您光临!");
}
</script>
</body>
</html>

请注意说明哈!那个很重要,开发人员要注意细节!

看了上面的你在想,这两个方法浏览器不兼容,咋办,当然!老办法咯!!先判断是IE还是火狐嘛,这个简单看下面代码:

<script type="text/javascript">
        function att_Event() {
            var a = document.getElementById("a");
            a.value = "点我有事件";
            if (document.all) {//IE
                a.attachEvent("onclick", Hello_ok);
            }
            else {//FF,Chrome,Safari
                a.addEventListener("click", Hello_ok, false);
            }
        }
        function Hello_ok() {
            alert("您好,我测试attachEvent时间方法!");
        }
    </script>