Правильное использование addEventListener () / attachEvent ()? - PullRequest
Новая
       66

Правильное использование addEventListener () / attachEvent ()?

70 голосов
/ 17 апреля 2010

Мне интересно, как правильно использовать 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. Как изменить правильный / предпочтительный метод соответственно?

Ответы [ 2 ]

121 голосов
/ 05 июня 2012

Использование обоих схоже, хотя оба имеют немного другой синтаксис для параметра события:

addEventListener ( ссылка mdn ): 

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

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

Список событий для addEventListener.

attachEvent ( ссылка MSDN ): 

obj.attachEvent('onclick', callback);

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

Список событий для attachEvent.

Аргументы

Для обоих методов аргументы имеют следующий вид:
1. Является ли тип события.
2. Функция, вызываемая один раз для событиябыл запущен.
3. (только addEventListener) Если true, указывает, что пользователь желает инициировать capture .

Объяснение

Оба метода используются для достижения одной и той же цели присоединения события к элементу.
Разница в том, что attachEvent можно использовать только на старых trident движках рендеринга ( IE5 + IE5-8 *) и addEventListener - это стандарт W3, который реализован в большинстве других браузеров (FF, Webkit, Opera, IE9 +).

Дляподдержка кросс-браузерных событий, включая нормализации, которые вы не получите с помощью решения Diaz, используйте framework .

* IE9-10 поддерживает оба метода для обратной совместимости.

Спасибо Люку Пуплетту за то, что он указал, что 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' )
})
6 голосов
/ 16 января 2012

Любой, кто все еще участвует в этом обсуждении и не находит ответ, который ищет, ищет:
http://dustindiaz.com/rock-solid-addevent
Это одно из самых элегантных решений, которые я нашел для тех из нас, у кого есть ограничения на использование фреймворков. 

 function addEvent(obj, type, fn) {

   if (obj.addEventListener) {
     obj.addEventListener(type, fn, false);
     EventCache.add(obj, type, fn);
   } 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]);
     EventCache.add(obj, type, fn);
   } else {
     obj["on" + type] = obj["e" + type + fn];
   }

 }

 var EventCache = function () {

   var listEvents = [];
   return {
     listEvents: listEvents,
     add: function (node, sEventName, fHandler) {
       listEvents.push(arguments);
     },
     flush: function () {
       var i, item;

       for (i = listEvents.length - 1; i >= 0; i = i - 1) {
         item = listEvents[i];
         if (item[0].removeEventListener) {
           item[0].removeEventListener(item[1], item[2], item[3]);
         };

         if (item[1].substring(0, 2) != "on") {
           item[1] = "on" + item[1];
         };

         if (item[0].detachEvent) {
           item[0].detachEvent(item[1], item[2]);
         };

         item[0][item[1]] = null;
       };
     }
   };
 }();

 addEvent(window,'unload',EventCache.flush);
...