（转载）JS事件监听 JS:attachEvent和addEventListener使用方法

转载

mb61bc2ba16eece 2021-12-31 10:29:46 博主文章分类：JavaScript

文章标签 d3 js代码 html 文章分类 OpenStack 云计算

attachEvent和addEventListener使用方法

Js代码

<html>
<head>
<title>JS</title>
</head>

<body>
<input id="para" type="text"/>
<script>
    function test()
    {
        alert("test");
    }
    function pig()
    {
        alert("pig");
    }

    window.onload = function()
    {
        var element = document.getElementById("para");
        if (element.addEventListener)
        {
            element.addEventListener("focus", test, false);
            element.addEventListener("focus", pig, false);            
        }
        else
        {
            element.attachEvent("onfocus", test);
            element.attachEvent("onfocus", pig);        
        }
    }
</script>
</body>
</html>

****************实例结束**************************

JS:attachEvent和addEventListener 使用方法

attachEvent与addEventListener区别

适应的浏览器版本不同，同时在使用的过程中要注意

attachEvent方法按钮onclick

addEventListener方法按钮click

两者使用的原理：可对执行的优先级不一样，下面实例讲解如下：

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

addEventListener方法用于 Mozilla系列

举例：

Js代码

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
使用实例：

Js代码

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

}