js_javascript 기술에서 이벤트를 동적으로 로드하는 여러 방법 요약

방법 1, setAttribute
var obj = document.getElementById("obj");obj.setAttribute("onclick", "javascript:alert( '테스트');");
여기서는 간단하고 이해하기 쉬운 onclick 속성을 지정하기 위해 setAttribute를 사용합니다.

단: IE는

을 지원하지 않습니다. IE가 setAttribute 함수를 지원하지 않는 것은 아니지만, setAttribute를 사용하여 객체 속성, 컬렉션 속성, 이벤트 속성을 포함한 특정 속성을 설정하는 것을 지원하지 않습니다. 즉, setAttribute를 사용하십시오. 스타일, onclick 및 onmouseover 속성 설정은 IE에서 작동하지 않습니다.

방법 2, attachmentEvent 및 addEventListener 사용IE에서는 AttachEvent 지원
obj.attachEvent("onclick", Foo);

function Foo()

{
Alert("Test");
}

함께 작성할 수도 있습니다

obj.attachEvent("onclick", function(){alert("test");});

다른 브라우저는 addEventListener를 지원합니다
obj.addEventListener("click", Foo, false);

function Foo()

{
Alert("Test");
}

을 함께 쓸 수도 있습니다

obj.addEventListener("click", function(){alert("test");}, false);

attachEvent 이벤트에는 onclick과 같은 기능이 있지만 addEventListener에는 click과 같은 기능이 없습니다.

addEventListener에 대한 세 번째 인수(거의 사용되지 않음) useCapture - true인 경우 useCapture는 사용자가 캡처를 시작하려고 함을 나타냅니다. 캡처가 시작되면 지정된 유형의 모든 이벤트는 트리에서 그 아래의 EventTargets로 전달되기 전에 등록된 EventListener로 전달됩니다. 트리에 버블링되는 이벤트는 캡처를 사용하여 지정된 EventListener를 실행하지 않습니다. 종합응용프로그램

코드복사 코드는 다음과 같습니다.

if (window. attachmentEvent)

{
//IE의 이벤트 코드
}
else
{
//다른 브라우저의 이벤트 코드
}

방법 3, 이벤트 = 함수 예: obj.onclick = Foo;

이것은 여러 브라우저에서 지원됩니다. 이는 오래된 사양이지만(방법 2는 DOM2 사양에 속함) 사용 편의성으로 인해 사용하는 경우도 많습니다.

제 솔루션은 다음과 같습니다.

코드 복사코드는 다음과 같습니다.

function show(){

Alert("Hello, world!!!");
}

obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()');

attachEvent 메소드, 특정 One 이벤트에는 다른 처리 이벤트가 첨부되어 있습니다. (Mozilla 시리즈는 지원하지 않습니다)

Mozilla 시리즈의 addEventListener 메소드

예:

document.getElementById("btn").onclick = method1;

document.getElementById("btn").onclick = method2;

document.getElementById("btn").onclick = method3;

이렇게 쓰면 medhot3만 실행됩니다

은 다음과 같이 작성됩니다.

var btn1Obj = document.getElementById("btn1")

//object.attachEvent(event,function);

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