> 웹 프론트엔드 > JS 튜토리얼 > JS_javascript 기술에 이벤트를 동적으로 추가하는 여러 방법

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

WBOY
풀어 주다: 2016-05-16 17:18:01
원래의
1117명이 탐색했습니다.
방법 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의 메서드 구분:



코드 복사


코드는 다음과 같습니다.
 alert( ”ie6″); ”ie8″);
 }else if (isIE7){
 alert(”ie7″)
 }
}

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿