JS_javascript 기술에 이벤트를 동적으로 추가하는 여러 방법

방법 1, setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('test');"); 🎜>그러나 IE는 객체 속성, 컬렉션 속성 및 이벤트 속성을 포함한 특정 속성을 설정하기 위해 setAttribute를 사용하는 것을 지원하지 않습니다. 즉, setAttribute를 사용하여 스타일, onclick 및 onmouseover 속성을 설정하는 것은 IE에서 작동하지 않습니다.


방법 2, attachmentEvent 및 addEventListener 사용 IE는 attachmentEvent, object.attachEvent(event, function)를 지원합니다. 예:

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

obj.attachEvent("onclick", Foo)
function Foo()
{
Alert("Test");
}

또는 obj.attachEvent("onclick", function(){alert("Test");}); >다른 브라우저 지원 addEventListener, element.addEventListener(type,listener,useCapture,

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

obj.addEventListener("click", Foo, false)

function Foo()
{
alert("test");


동일함 함께 작성 가능 obj.addEventListener("click", function(){alert("test");}, false)
onclick과 같은 attachmentEvent 이벤트가 켜져 있음에 유의하세요. addEventListener가 on이 아닌 경우(예: click)

코드 복사 코드는 다음과 같습니다. 호환성 고려:

if (window.attachEvent )//IE와 호환 가능

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


위의 이벤트 추가 방법에는 두 가지가 있습니다. 동일한 이벤트 추가 방법을 사용하려면 일반 이벤트 추가 기능을 다시 작성해야 합니다.

버전 1:

코드 복사 코드는 다음과 같습니다. function addEvent (elm, evType, fn, useCapture) {

if (elm.addEventListener ) {

elm.addEventListener(evType, fn, useCapture);//DOM2.0
return true; 🎜>elm.attachEvent) {
var r = elm.attachEvent('on' evType, fn);//IE5
return r
}
else {
elm ['on' evType] = fn;//DOM 0
}
}


HTML5 작업 그룹 버전:

코드 복사

코드는 다음과 같습니다. var addEvent=(function(){ if(document.addEventListener){ return function( el,type,fn){

if(el.length){

for(var i=0;iaddEvent(el[i],type,fn) ;
}
}else{
el.addEventListener(type, fn,false)
}
}else{
return 함수(el,type, fn){
if(el.length){
for(var i =0;iaddEvent(el[i],type,fn); }
}else{
el.attachEvent('on' type,function (){
return fn.call(el,window.event);
})
}
};
}
})();



방법 3, 이벤트 = 함수

예: obj.onclick = Foo; 이런 이벤트 바인딩 방식은 주류 브라우저와 호환되지만 여러 개 추가하면

코드 복사

코드는 어떻습니까?

obj.onclick=method1; obj.onclick=method2; obj.onclick=method3; 이렇게 쓰면 , 마지막 바인딩된 이벤트만 실행되며 여기서는 method3이 실행되며 이 때 메서드를 사용해야 합니다. 이벤트 바인딩을 위한 두 가지 메서드

IE6, IE7, IE8의 메서드 구분:

코드 복사


코드는 다음과 같습니다.

var isIE=!!window.ActiveXObject; var isIE6=isIE&&! window.XMLHttpRequest; var isIE8=isIE&&!!document.documentMode; var isIE7=isIE&&!isIE6&&!isIE8; if (isIE){ 　if (isIE6){

　alert( ”ie6″); ”ie8″);

　}else if (isIE7){
　alert(”ie7″)
　}
}