Javascript addEventListener（）/attachEvent（）的正确用法？

我想知道如何正确使用

addEventListener

分别

attachEvent

window.onload = function (myFunc1) { /* do something */ }

function myFunc2() { /* do something */ }

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

 // ...

或

?

这是跨浏览器安全的还是我最好使用以下内容：

function myFunc1(){ /* do something */ }
function myFunc2(){ /* do something */ }
// ...

function addOnloadEvent(fnc){
  if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", fnc, false );
  else if ( typeof window.attachEvent != "undefined" ) {
    window.attachEvent( "onload", fnc );
  }
  else {
    if ( window.onload != null ) {
      var oldOnload = window.onload;
      window.onload = function ( e ) {
        oldOnload( e );
        window[fnc]();
      };
    }
    else
      window.onload = fnc;
  }
}

addOnloadEvent(myFunc1);
addOnloadEvent(myFunc2);
// ...

---

并且：假设

myfunc2

仅适用于IE 7。如何相应地修改正确的/首选的方法？

任何人仍然参与讨论，但没有找到他们想要的答案：

这是我为那些使用框架受到限制的人找到的最优雅的解决方案之一

功能加法器（obj，类型，fn）{
if（对象添加列表器）{
obj.addEventListener（类型，fn，false）；
添加（obj，type，fn）；
}else if（对象附件）{
obj[“e”+类型+fn]=fn；
obj[type+fn]=函数（）{
obj[“e”+类型+fn]（窗口事件）；
}
对象附件（“on”+类型，对象[type+fn]）；
添加（obj，type，fn）；
}否则{
obj[“on”+类型]=obj[“e”+类型+fn]；
}
}
var EventCache=函数（）{
var-listEvents=[]；
返回{
listEvents:listEvents，
添加：函数（节点、七名、fHandler）{
listEvents.push（参数）；
},
flush:function（）{
变量i，项目；
对于（i=listEvents.length-1；i>=0；i=i-1）{
项目=列表事件[i]；
如果（项[0]。删除EventListener）{
项目[0]。删除EventListener（项目[1]，项目[2]，项目[3]）；
};
如果（项目[1]。子字符串（0，2）！=“开”）{
第[1]项=在“+第[1]项上的“；
};
如果（项[0]。事件）{
项[0]。事件（项[1]，项[2]）；
};
项目[0][项目[1]]=null；
};
}
};
}();
addEvent（窗口“卸载”，EventCache.flush）；

两者的用法相似，但两者对事件参数的语法略有不同：

addEventListener（）： 受所有主要浏览器（FF、Chrome、Edge）支持

对于

addEventListener

附件（）： 由IE 5-8支持*

obj.attachEvent('onclick', callback);

function callback(){ /* do stuff */ }

对于

附件

论据 对于这两种方法，参数如下所示：

是事件类型

触发事件后要调用的函数

---

（

addEventListener

仅限）如果为true，则表示用户希望启动

解释 这两种方法用于实现将事件附加到元素的相同目标。

---

不同之处在于，

attachEvent

只能在较旧的渲染引擎（IE5+IE5-8*）上使用，

addEventListener

是一种W3标准，在大多数其他浏览器（FF、Webkit、Opera、IE9+）中实现

对于可靠的跨浏览器事件支持，包括Diaz解决方案无法实现的规范化，请使用

*IE9-10支持这两种方法，以实现向后兼容性

感谢您指出，

attachEvent

已从IE11中删除

最小跨浏览器实现 正如建议的那样，您应该了解这一点，以便在不使用框架的情况下实现可靠的跨浏览器实现：

功能加法器（obj，类型，fn）{
if（对象添加列表器）{
obj.addEventListener（类型，fn，false）；
}
else if（对象附件）{
obj[“e”+类型+fn]=fn；
obj[type+fn]=function（）{obj[“e”+type+fn]（window.event）；}
对象附件（“on”+类型，对象[type+fn]）；
}
否则{
obj[“on”+类型]=obj[“e”+类型+fn]；
}
}
附录（文档“点击”功能（e）{
console.log（'documentclick'）
})

您可能不喜欢我这样说，但为什么不使用框架来处理此类问题呢？在这种情况下，我会，但我不能。“那么，你能帮我一下吗？”金妮看了看我的答案。如果您需要任何进一步的解释，请告诉我。至少，您不应该每次注册事件时都测试事件模型。这可以很容易地划分为一个通用函数，您可以将元素、事件类型和处理程序传递给该函数。@CamiloMartin如果您之后收到这样的注释，那么总是值得输入一个好的答案，谢谢：）

addEventListener

也受IE9+支持。attachEvent已在IE11中删除，因此，检测IE并使用此API的代码现在将失败。我还没有看到这种情况发生，但我注意到欺骗IE11中的IE10代理字符串可能会导致脚本错误。@Lukeppulett dustin diaz实现基于功能检测，而不是浏览器检测。这就是你所指的吗？

obj.addEventListener('click', callback, false);

function callback(){ /* do stuff */ }

obj.attachEvent('onclick', callback);

function callback(){ /* do stuff */ }