attachEvent和addEventListener 使用方法 -优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_15538/article/details/81791319

本文介绍attachEvent和addEventListener两种事件监听方法的使用。attachEvent方法主要用于IE浏览器，而addEventListener则用于Mozilla系列浏览器。文章通过示例展示了如何为按钮添加多个点击事件监听器，并解释了不同浏览器下事件触发的顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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


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


//执行顺序为method3->method2->method1
var btn1Obj = document.getElementById("btn1"); 
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);

如果是Mozilla系列，并不支持该方法，需要用到addEventListener


//执行顺序为method1->method2->method3
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);

实例


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);
}

/**
* 添加事件监听函数
* target 目标元素
* eventType 触发事件的种类
* functionRef 监听函数
* capture 捕获阶段
*/
function attachEventListener(target, eventType, functionRef, capture){
     if(typeof target.addEventListener != "undefined"){
         target.addEventListener(eventType, functionRef, capture);//FF
    }else if(typeof target.attachEvent != "undefined"){
        target.attachEvent("on" + eventType, functionRef);//IE
    }else{
        eventType = "on" + eventType;
        if(typeof target[eventType] == "function"){
            var oldListener = target[eventType];
            target[eventType] = function(){
                oldListener();
                return functionRef();
            };
        }else{
            target[eventType] = functionRef;
        }
    }
}