JS:attachEvent和addEventListener 使用方法

本文介绍了在不同浏览器中如何使用attachEvent及addEventListener方法为DOM元素绑定多个事件处理函数,并解释了事件处理函数的执行顺序。
attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)

addEventListener方法 用于 Mozilla系列

举例:
3ed8e11f957cb62ff724e404.jpgdocument.getElementById("btn").onclick = method1;
8a977863db51b62c0d33fa04.jpgdocument.getElementById(
"btn").onclick = method2;
c2ba786023465a08eaf8f804.jpgdocument.getElementById(
"btn").onclick = method3;
如果这样写,那么将会只有medhot3被执行

写成这样:
38ad9444da8dc700500ffe04.jpgvar btn1Obj = document.getElementById("btn1"); 
df66094c627a04b5d62afc04.jpg
//object.attachEvent(event,function);
6591caf9e25fbd15242df204.jpg
btn1Obj.attachEvent("onclick",method1);
e3b47359125809662934f004.jpgbtn1Obj.attachEvent(
"onclick",method2);
11b3c72a1141e9d7023bf604.jpgbtn1Obj.attachEvent(
"onclick",method3);
执行顺序为method3->method2->method1

如果是Mozilla系列,并不支持该方法,需要用到addEventListener
1caa279b384e86f9c8eaf404.jpgvar btn1Obj = document.getElementById("btn1");
37a548b5f49fc88237d3ca04.jpg
//element.addEventListener(type,listener,useCapture);
fd7406ce09a60875b700c804.jpg
btn1Obj.addEventListener("click",method1,false);
024dc639f775e7bf3b87ce04.jpgbtn1Obj.addEventListener(
"click",method2,false);
829e29f379f2341c342acc04.jpgbtn1Obj.addEventListener(
"click",method3,false);
执行顺序为method1->method2->method3

使用实例:

0e19fa50705f1b101138c204.jpg1。 
01b4d55c574d8e0ffaf2c004.jpg
var el = EDITFORM_DOCUMENT.body; 
24a64043b2876f5d9213c604.jpg
//先取得对象,EDITFORM_DOCUMENT实为一个iframe
cf6ca111d8666d32cb80c404.jpga78da37e87f5b8740dd7da04.jpg
if (el.addEventListener)...{
fe1e763843a24c6f96ddd804.jpg el.addEventListener(
'click', KindDisableMenu, false);
38498223c6a87c08ac34de04.jpg99aa4a82e7c20dee0df4d204.jpg}
 else if (el.attachEvent)...{
8629c3a25b81ece1caefd004.jpg el.attachEvent(
'onclick', KindDisableMenu);
386a22ad929aab454a36d604.jpg}

7fa8bfaf73a87e807dd92a04.jpg
2。 
1a43b0cc23ac505c00e92804.jpg48479e10609ce44d203f2e04.jpg
if (window.addEventListener) ...{
35772a01424a65427aec2c04.jpg window.addEventListener(
'load', _uCO, false);
15a1ab0e1e9989ab37d12204.jpg4f7247e751a4f262b8382004.jpg}
 else if (window.attachEvent) ...{
024f3c2ed04d461c4ec22604.jpg window.attachEvent(
'onload', _uCO);
8da6885024b7082e84352404.jpg}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值