때로는 자바스크립트 이벤트의 일부 메소드를 동적으로 로드해야 하는 경우도 있습니다.
종종 우리는 브라우저 호환성 문제와 관련된 이벤트를 JS에 동적으로 추가해야 합니다. 우리는 종종 아래에 설명된 여러 방법을 혼합하여 사용합니다.
방법 1, setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('test');");
여기서 setAttribute는 간단하고 이해하기 쉬운 onclick 속성을 지정하는 데 사용됩니다.
그러나 IE는 이를 지원하지 않습니다 . IE가 setAttribute 기능을 지원하지 않는 것은 아니지만 setAttribute를 사용하여 개체 속성, 컬렉션 속성 및 이벤트 속성을 포함한 특정 속성을 설정하는 것을 지원하지 않습니다. 스타일 설정, onclick 및 onmouseover는 IE에서 작동하지 않습니다.
방법 2, attachmentEvent 및 addEventListener 사용
IE는 AttachEvent를 지원합니다.
obj.attachEvent("onclick", Foo);
함수Foo()
{
경고("테스트");
}
같이 쓸 수도 있어요
obj.attachEvent("onclick", function(){alert("test");});
다른 브라우저는 addEventListener를 지원합니다.
obj.addEventListener("click", Foo, false);
함수Foo()
{
경고("테스트");
}
같이 쓸 수도 있어요
obj.addEventListener("click", function(){alert("Test");}, false);
AttachEvent 이벤트에는 onclick과 같은 기능이 있지만 addEventListener에는 click과 같은 기능이 없습니다.
그런데 addEventListener의 세 번째 매개변수(거의 사용되지는 않지만) useCapture - true인 경우 useCapture는 사용자가 캡처를 시작하려고 함을 나타냅니다. 캡처가 시작되면 지정된 유형의 모든 이벤트는 트리에서 그 아래의 EventTargets로 전달되기 전에 등록된 EventListener로 전달됩니다. 트리를 버블링하는 이벤트는 캡처를 사용하여 지정된 EventListener를 실행하지 않습니다.
종합적인 적용
다음과 같이 코드 코드를 복사합니다.
if(window.attachEvent)
{
//IE 이벤트 코드
}
또 다른
{
//다른 브라우저의 이벤트 코드
}
방법 3, 이벤트 = 함수
예: obj.onclick = Foo;
이는 여러 브라우저에서 지원되는데, 기존 사양(방법 2는 DOM2 사양에 속함)에 속하지만, 사용하기 쉽기 때문에 많은 상황에서 사용됩니다.
내 해결책은 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
함수 표시(){
Alert("안녕하세요, 세상!!!");
}
obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()');
attachmentEvent 메소드는 다른 처리 이벤트를 이벤트에 첨부합니다. (Mozilla 시리즈는 지원되지 않습니다)
addEventListener 메소드는 Mozilla 시리즈에서 사용됩니다.
예:
document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
이렇게 작성하면 medhot3만 실행됩니다.
다음과 같이 작성하세요.
var btn1Obj = document.getElementById("btn1");
//object.attachEvent(이벤트,함수);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
실행 순서는 method3->method2->method1 입니다.
Mozilla 시리즈인 경우 이 메소드는 지원되지 않으며 addEventListener를 사용해야 합니다.
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
실행 순서는 method1->method2->method3 입니다.
사용 예:
1.
다음과 같이 코드 코드를 복사합니다.
var el = EDITFORM_DOCUMENT.body;
//객체를 먼저 가져옵니다. EDITFORM_DOCUMENT는 실제로 iframe입니다.
if (el.addEventListener){
el.addEventListener('click', KindDisableMenu, false);
} else if (el.attachEvent){
el.attachEvent('onclick', KindDisableMenu);
}
2.
다음과 같이 코드 코드를 복사합니다.
if(window.addEventListener) {
window.addEventListener('load', _uCO, false);
} else if (window.attachEvent) {
window.attachEvent('onload', _uCO);
}