javascript attachEvent和addEventListener使用方法

162 阅读 0 评论 107 点赞

我是靠谱客的博主失眠篮球，最近开发中收集的这篇文章主要介绍javascript attachEvent和addEventListener使用方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

attachEvent方法按钮onclick
addEventListener方法按钮click
两者使用的原理：可对执行的优先级不一样，下面实例讲解如下：
attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列）
addEventListener方法用于 Mozilla系列
举例:
Java代码

复制代码代码如下:

 
document.getElementById("btn").onclick = method1; 
document.getElementById("btn").onclick = method2; 
document.getElementById("btn").onclick = method3; 

如果这样写,那么将会只有medhot3被执行
写成这样：
Java代码:

复制代码代码如下:

 
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
Java代码:

复制代码代码如下:

 
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
使用实例：
1。 Java代码:

复制代码代码如下:

 
var el = EDITFORM_DOCUMENT.body; 
//先取得对象，EDITFORM_DOCUMENT实为一个iframe 
if (el.addEventListener)...{ 
el.addEventListener('click', KindDisableMenu, false); 
} else if (el.attachEvent)...{ 
el.attachEvent('onclick', KindDisableMenu); 
} 

2。 Java代码:

复制代码代码如下:

 
if (window.addEventListener){ 
window.addEventListener('load', _uCO, false); 
} else if (window.attachEvent){ 
window.attachEvent('onload', _uCO); 
} 