正确使用addEventListener（）/ attachEvent（）？ [英] Correct usage of addEventListener() / attachEvent()?

问题描述

我想知道如何正确使用 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);
}

 // ...

？

这种跨浏览器是安全的还是我应该更好地使用这样的东西：

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：说 myfunc2 仅适用于IE 7。如何相应地修改正确/首选方法？

AND: Say myfunc2 is for IE 7 only. How to modify the correct/preferred method accordingly?

推荐答案

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

The usage of both is similar, though both take on a slightly different syntax for the event parameter:

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

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

< addEventListener 。事件列表 / p>

attachEvent（ msdn reference ）：

Events list for addEventListener.

obj.attachEvent('onclick', callback);

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

< <$ href =http://msdn.microsoft.com/en-us/library/ie/ms533051%28v=vs.85%29.aspx =nofollow noreferrer> <$的事件列表 c $ c> attachEvent 。

Events list for attachEvent.

对于这两种方法参数如下：

1.是事件类型。

2.触发事件后调用的函数。

3. （仅限 addEventListener ）如果为true，则表示用户希望启动捕获。

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.

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

区别在于 attachEvent 只能用于较旧的三叉戟环引擎（ IE5 + IE5-8 *）和 addEventListener 是W3标准，在大多数其他浏览器中实现（FF，Webkit，Opera ，IE9 +）。

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解决方案无法获得的规范化，请使用框架。

For solid cross browser event support including normalizations that you won't get with the Diaz solution use a framework.

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

*IE9-10 support both methods, for backwards compatibility.

感谢 Luke Puplett 指出 attachEvent 已从IE11中删除。

Thanks to Luke Puplett for pointing out that attachEvent has been removed from IE11.

正如 Smitty 所建议你应该看看这个 Dustin Diaz addEvent ，用于实现完整的跨浏览器工具不使用框架的情况：

As Smitty recommended you should take a look at this Dustin Diaz addEvent for a solid cross browser implementation without the use of a framework:

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

这篇关于正确使用addEventListener（）/ attachEvent（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！