javascript - addEventListener()/attachEvent() 的正确用法？

Question

我想知道如何分别正确使用addEventListenerattachEvent？

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。如何相应地修改正确/首选方法？

Answer 1

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

添加事件监听器(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。

参数

对于这两种方法，参数如下:

1. 是事件类型。
2. 是事件触发后调用的函数。
3. (仅限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' )
})