正确使用addEventListener()/ attachEvent()吗?
收藏

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

 // ...

要么

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: Say myfunc2 is for IE 7 only. How to modify the correct/preferred method accordingly?

最佳答案

两者的用法相似,尽管两者的事件参数语法略有不同:

addEventListener(mdn参考):

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

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

Events list for addEventListener.

attachEvent(msdn参考):

obj.attachEvent('onclick', callback);

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

Events list for attachEvent.

争论

For both of the methods the arguments are as follows:
1. Is the event type.
2. Is the function to call once the event has been triggered.
3. (addEventListener only) If true, indicates that the user wishes to initiate capture.

说明

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*) and addEventListener is a W3 standard that is implemented in the majority of other browsers (FF, Webkit, Opera, IE9+).

要获得可靠的跨浏览器事件支持,包括使用Diaz解决方案无法获得的规范化,请使用框架。

* IE9-10支持两种方法,以实现向后兼容。

Thanks to Luke Puplett for pointing out that attachEvent has been removed from 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' )
})

    公众号
    关注公众号订阅更多技术干货!