js中的addEventListener

浏览数：35 / 时间：2015年06月09日

JS:attachEvent和addEventListener 使用方法

attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列）

addEventListener方法用于 Mozilla系列

举例:

document.getElementByIdx_x("btn").onclick = method1;
技术分享

document.getElementByIdx_x("btn").onclick = method2;
技术分享

document.getElementByIdx_x("btn").onclick = method3;

如果这样写,那么将会只有medhot3被执行

写成这样：

var btn1Obj = document.getElementByIdx_x("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.getElementByIdx_x("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。

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。

if (window.addEventListener) {
技术分享

window.addEventListener(‘load‘, _uCO, false);
技术分享

} else if (window.attachEvent) {
技术分享

window.attachEvent(‘onload‘, _uCO);
技术分享

}

示例二：

代码

①
//js中addachEvent,addEventListener的使用方法
//非IE浏览器的动态添加,注销事件的方法
el.addEventListener(‘click‘, msg, false);//添加
el.removeEventListener(‘click‘, msg, false);//注销
//IE中动态添加事件的方法
el.attachEvent(‘onclick‘,msg);//添加
el.detachEvent(‘onclick‘,msg);//注销
例:
<body>
<input id="123" type="text" id="test" value="点击" />
<input id="Button1" type="button" onclick="ok()" value="删除动态添加的事件" />
<script>
var el = document.getElementById("123"); //先取得对象
alert("el.addEventListener=="+el.addEventListener);//提示
alert("el.attachEvent=="+el.attachEvent);
if (el.addEventListener) //用于 Mozilla系列
{
el.addEventListener(‘click‘, msg, false);
}
else if (el.attachEvent) //非Mozilla系列(IE)
{
el.attachEvent(‘onclick‘, msg);
}
if (window.addEventListener) //
{
window.addEventListener(‘load‘,msg, false);
}
else if (window.attachEvent)
{
window.attachEvent(‘onload‘, msg);
}
function msg()
{
alert("我是动态添加的");
}
function ok()
{
if (el.removeEventListener) //用于 Mozilla系列
{
el.removeEventListener(‘click‘, msg, false);
}
else if (el.detachEvent) //IE中动态添加事件的方法
{
el.detachEvent(‘onclick‘, msg);
}
}
</script>
</body>