자바스크립트 이벤트 핸들러_자바스크립트 기술 소개

1. DOM 레벨 0 이벤트 핸들러
이벤트 핸들러 속성에 함수 값을 지정합니다.
예:

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

var btn = document.getElementById( "myBtn");
btn.onclick = funtion(){
alert(this.id); //"myBtn"
}

이벤트 삭제 , btn.onclick = null
---------------------------- ---------- ----------
2. DOM2 레벨 이벤트 핸들러
먼저 이벤트 핸들러 지정 및 삭제 작업을 처리하는 데 사용되는 "DOM 레벨 2 이벤트"에 정의된 두 가지 메서드를 소개합니다.
addEventListener()
removeEventListener()
모든 DOM 노드 이 두 가지 메소드를 포함하고 처리 이벤트 이름, 이벤트 핸들러로서의 함수 및 부울 값이라는 3가지 매개변수를 허용합니다.
마지막 부울 매개변수인 true: 캡처 단계에서 이벤트 핸들러를 호출하는 것을 의미하고, false: 버블링 단계에서 이벤트 핸들러를 호출하는 것을 의미합니다.

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

var btn = document.getElementById("myBtn ");
btn.addEventListener("click",funciton(){
alert(this.id);
},false);

DOM2로 이벤트 핸들러 추가 level 메소드 주요 이점은 여러 이벤트 핸들러를 추가할 수 있다는 것입니다.
예:

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

var btn = document.getElementById( "myBtn");
btn.addEventListener("click",funciton(){
alert(this.id);
},false);
btn.addEventListener(" click",funciton (){
alert(“Hello World!”);
},false);

이 두 이벤트가 순서대로 실행됩니다.
addEventListener()를 통해 추가된 이벤트는 RemoveEventListener()를 통해서만 제거할 수 있습니다. 제거할 때 전달된 매개변수는 추가할 때의 매개변수와 일치해야 합니다. 즉, 익명 함수는 제거할 수 없습니다.

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

var btn = document.getElementById("myBtn ");
var handler = function(){
alert(this.id);
};
btn.addEventListener("click" , handler , false);
btn.removeEventListener ("click", handler, false)

대부분의 경우 이벤트 핸들러는 다양한 브라우저와 호환되도록 이벤트 흐름의 버블링 단계에 추가됩니다.
Firefox, Safari, Chrome 및 Opera는 DOM2 수준 이벤트 핸들러를 지원합니다.
---------------------------------- --- ---------------------
IE 이벤트 핸들러
IE는 DOM의 메소드와 유사한 두 가지 메소드를 구현합니다.
attachEvent()
detachEvent()
두 메소드 모두 이벤트 핸들러 이름과 이벤트 핸들러 함수라는 두 가지 매개변수를 허용합니다.
IE에서는 시간 버블링만 지원하므로, AttachEvent()를 통해 추가된 이벤트 핸들러는 버블링 단계에 추가됩니다.
예:

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

var btn = document.getElementById( "myBtn");
btn.attachEvent("onclick" , function(){
alert("Clicked");
})

attachmentEvent() 첫 번째 매개변수는 "click"이 아니라 "onclick"입니다.
IE의 AttachEvent()와 DOM0의 addEventListener()의 주요 차이점은 이벤트 핸들러의 범위입니다.
DOM0 레벨 메서드, 이벤트 핸들러는 자신이 속한 요소의 범위에서 실행됩니다.
attachEvent() 메서드, 이벤트 핸들러는 전역 범위에서 실행되므로 이는 window와 같습니다.
attachEvent()는 요소에 여러 이벤트 핸들러를 추가할 수도 있습니다.

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

var btn = document.getElementById("myBtn ");
btn.attachEvent("onclick" , function(){
alert("clicked");
})
btn.attachEvent("onclick" , function(){
alert("Hello World!")
})

DOM 메소드와 달리 이러한 이벤트 핸들러는 추가된 순서대로 실행되지 않고 반대 방향으로 실행됩니다.
detachEvent()의 사용법은 RemoveEventListener()의 사용법과 동일합니다.
---------------------------------- --- ---------------------
4. 크로스 브라우저 이벤트 핸들러

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

var EventUtil = {
addHandler : function( 요소, 유형, 핸들러){
if(element.addEventListener){
element.addEventListener(type, handler, false)
} else if(element.attachEvent){
element.attachEvent( "on" 유형, 핸들러)
} else {
element["on" 유형] = 핸들러
}
},
removeHandler: 함수( 요소, 유형 , handler){
if ( element.removeElementListener) {
element.removeElementListener( type , handler , flase)
} else if ( element.detachEvent) {
element.detachEvent ( "on" 유형, 핸들러)
} else {
요소["on" 유형] = 핸들러
}
}
}