我想知道如何分别正确使用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);
// ...
AND:假设 myfunc2
仅适用于 IE 7。如何相应地修改正确/首选方法?
最佳答案
两者的用法相似,但事件参数的语法略有不同:
添加事件监听器(mdn reference):
所有主流浏览器(FF、Chrome、Edge)均支持
obj.addEventListener('click', callback, false);
function callback(){ /* do stuff */ }
Events list对于 addEventListener
。
附加事件(msdn reference):
IE 5-8 支持*
obj.attachEvent('onclick', callback);
function callback(){ /* do stuff */ }
Events list对于 attachEvent
。
参数
对于这两种方法,参数如下:
- 是事件类型。
- 是事件触发后调用的函数。
- (仅限
addEventListener
) 如果为真,表示用户希望启动 capture .
说明
这两种方法都用于实现将事件附加到元素的相同目标。
不同之处在于 attachEvent
只能用于较旧的 trident渲染引擎(IE5+ IE5-8*)和addEventListener
是在大多数其他浏览器(FF、Webkit、Opera、IE9+)中实现的 W3 标准。
对于稳固的跨浏览器事件支持,包括您无法通过 Diaz 解决方案获得的规范化,请使用 framework .
*为了向后兼容,IE9-10 支持这两种方法。
感谢Luke Puplett指出 attachEvent
已从 IE11 中删除。
最小的跨浏览器实现
作为Smitty推荐你可以用这个Dustin Diaz不使用框架的可靠跨浏览器实现的 addEvent 实现:
function addEvent(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() {obj["e"+type+fn](window.event);}
obj.attachEvent("on"+type, obj[type+fn]);
}
else {
obj["on"+type] = obj["e"+type+fn];
}
}
addEvent( document, 'click', function (e) {
console.log( 'document click' )
})
关于javascript - addEventListener()/attachEvent() 的正确用法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2657182/