Интересно, как 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. Как соответственно изменить правильный / предпочтительный метод?
Ответы:
Оба используются аналогично, хотя оба имеют немного другой синтаксис для параметра события:
addEventListener ( ссылка на mdn ):
Поддерживается всеми основными браузерами (FF, Chrome, Edge)
obj.addEventListener('click', callback, false); function callback(){ /* do stuff */ }
Список событий для
addEventListener
.attachEvent ( ссылка msdn ):
Поддерживается IE 5-8 *
obj.attachEvent('onclick', callback); function callback(){ /* do stuff */ }
Список событий для
attachEvent
.Аргументы
Для обоих методов аргументы следующие:
addEventListener
только) Если true, указывает, что пользователь желает начать захват .Объяснение
Оба метода используются для достижения одной и той же цели - привязки события к элементу.
Разница в том, что он
attachEvent
может использоваться только в старых движках рендеринга трезубца (IE5 +IE5-8 *) иaddEventListener
является стандартом W3, который реализован в большинстве других браузеров (FF, Webkit, Opera, IE9 +).Для надежной поддержки кроссбраузерных событий, включая нормализацию, которую вы не получите с помощью решения Diaz, используйте фреймворк .
* IE9-10 поддерживает оба метода для обратной совместимости.
Спасибо Люку Пуплетту за указание на то, что
attachEvent
он был удален из IE11.Минимальная кроссбраузерная реализация
Как рекомендовал Смитти, вам следует взглянуть на этот 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' ) })
источник
addEventListener
также поддерживается IE9 +.Любой, кто все еще участвует в этом обсуждении и не находит ответа, который искал, оформить заказ:
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);
источник