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 */ }
if (window.addEventListener) {
window.addEventListener('load', myFunc1, false);
} else if (window.attachEvent) {
window.attachEvent('onload', myFunc1);
}
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。如何相应地修改正确/首选方法?
I'm wondering how to use addEventListener
respectively attachEvent
correctly?
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);
}
// ...
or
function myFunc1() { /* do something */ }
if (window.addEventListener) {
window.addEventListener('load', myFunc1, false);
} else if (window.attachEvent) {
window.attachEvent('onload', myFunc1);
}
function myFunc2() { /* do something */ }
if (window.addEventListener) {
window.addEventListener('load', myFunc2, false);
} else if (window.attachEvent) {
window.attachEvent('onload', myFunc2);
}
// ...
?
Is this cross-browser secure or should I better go with something like this:
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);
// ...
AND: Say myfunc2
is for IE 7 only. How to modify the correct/preferred method accordingly?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
两者的用法相似,但事件参数的语法略有不同:
addEventListener (mdn 参考):
所有主流浏览器(FF、Chrome、Edge)均支持
事件列表 用于
addEventListener
。AttachEvent (msdn 参考):
受 IE 5-8 支持*
attachEvent
的事件列表。参数
对于这两种方法,参数如下:
addEventListener
) 如果为 true,则表示用户希望启动 捕获。说明
这两种方法都用于实现将事件附加到元素的相同目标。
不同之处在于
attachEvent
只能在较旧的 trident< 上使用/a> 渲染引擎 (IE5+IE5-8*) 和addEventListener
是在大多数其他浏览器(FF、Webkit、Opera、IE9+)中实现的 W3 标准。要获得可靠的跨浏览器事件支持,包括使用 Diaz 解决方案无法获得的标准化,请使用框架 。
*IE9-10支持这两种方法,以实现向后兼容。
感谢 Luke Puplet 指出
attachEvent
已从 IE11 中删除。最小跨浏览器实现
正如 Smitty 建议,您可以使用此 Dustin Diaz addEvent 实现,无需使用框架即可实现可靠的跨浏览器实现:
The usage of both is similar, though both take on a slightly different syntax for the event parameter:
addEventListener (mdn reference):
Supported by all major browsers (FF, Chrome, Edge)
Events list for
addEventListener
.attachEvent (msdn reference):
Supported by IE 5-8*
Events list for
attachEvent
.Arguments
For both of the methods the arguments are as follows:
addEventListener
only) If true, indicates that the user wishes to initiate capture.Explanation
Both methods are used to achieve the same goal of attaching an event to an element.
The difference being is that
attachEvent
can only be used on older trident rendering engines (IE5+IE5-8*) andaddEventListener
is a W3 standard that is implemented in the majority of other browsers (FF, Webkit, Opera, IE9+).For solid cross browser event support including normalizations that you won't get with the Diaz solution use a framework.
*IE9-10 support both methods, for backwards compatibility.
Thanks to Luke Puplett for pointing out that
attachEvent
has been removed from IE11.Minimal cross browser implementation
As Smitty recommended you can use this Dustin Diaz addEvent implementation for a solid cross browser implementation without the use of a framework:
任何仍在进行此讨论但未找到他们正在寻找的答案的人结帐:
http://dustindiaz.com/rock-solid-addevent
这是最优雅的之一我为我们这些限制使用框架的人找到了解决方案。
Anyone still hitting this discussion and not finding the answer they were looking for checkout:
http://dustindiaz.com/rock-solid-addevent
This is one of the most elegant solutions I found for those of us with restrictions on using the frameworks.