addEventListener () / attachEvent ()의 올바른 사용법?
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);
// ...
AND : myfunc2
IE 7 전용입니다. 그에 따라 올바른 / 선호 방법을 수정하는 방법은 무엇입니까?
둘 다 이벤트 매개 변수에 대해 약간 다른 구문을 사용하지만 두 가지 사용법은 비슷합니다.
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 인 경우 사용자가 캡처 를 시작하려고 함을 나타냅니다 .
설명
두 방법 모두 이벤트를 요소에 연결하는 동일한 목표를 달성하는 데 사용됩니다.
차이점은 attachEvent
이전 트라이던트 렌더링 엔진 ( IE5 + IE5-8 *) 에서만 사용할 수 addEventListener
있으며 대부분의 다른 브라우저 (FF, Webkit, Opera, IE9 +)에서 구현되는 W3 표준이라는 것입니다.
Diaz 솔루션에서 얻을 수없는 정규화를 포함한 견고한 크로스 브라우저 이벤트 지원을 위해 프레임 워크를 사용합니다 .
* IE9-10은 이전 버전과의 호환성을 위해 두 가지 방법을 모두 지원합니다.
IE11에서 제거되었음을 지적한 Luke Puplett 에게 감사드립니다 attachEvent
.
최소 크로스 브라우저 구현
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' )
})
아직이 토론에 참여하고 있고 그들이 원하는 답을 찾지 못한 사람 :
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);
참고 URL : https://stackoverflow.com/questions/2657182/correct-usage-of-addeventlistener-attachevent
'programing' 카테고리의 다른 글
"./docker-compose.yml"의 버전은 지원되지 않습니다. (0) | 2020.10.19 |
---|---|
VS 2017-디버깅시 매우 느림 (지연) (0) | 2020.10.19 |
setTimeout이 내 루프를 취소하지 않는 이유는 무엇입니까? (0) | 2020.10.19 |
Google 크롬 모바일 에뮬레이터 : 화면 키보드에 표시하는 방법 (0) | 2020.10.19 |
Golang에서 긴 코드 줄을 끊는 방법은 무엇입니까? (0) | 2020.10.19 |