Javascript 이벤트 핸들러_javascript 기술의 여러 방법에 대한 간략한 토론

이벤트는 사용자나 브라우저 자체가 수행하는 작업입니다. 예를 들어 클릭(click)과 마우스 오버(mouseover)는 이벤트의 이름입니다. 이벤트에 해당하는 함수를 이벤트 핸들러(또는 이벤트 리스너)라고 합니다. 이벤트 처리기를 지정하는 방법에는 여러 가지가 있습니다.
1: HTML 이벤트 핸들러.
예:

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

type="button " value="click me" onclick="show()"/>


현재 우리 모두가 이 방법을 더 자주 사용하고 있다고 생각합니다. html 두 가지 단점이 있습니다.

(1) 우선 시차 문제가 있습니다. 이 예에서는 show() 함수가 버튼 아래와 페이지 하단에 정의되어 있다고 가정할 때, 페이지에서 show() 함수를 구문 분석하기 전에 사용자가 버튼을 클릭하면 오류가 발생합니다
(2; ) 두 번째 단점은 html이 자바스크립트 코드와 밀접하게 결합되어 있다는 것입니다. 타임 핸들러를 변경하려면 html 코드와 javascript 코드 두 곳을 변경해야 합니다.
결과적으로 많은 개발자는 HTML 이벤트 핸들러를 포기하고 대신 JavaScript를 사용하여 이벤트 핸들러를 지정합니다.

둘: Javascript 지정 이벤트 핸들러
Javascript 지정 이벤트 핸들러에는 세 가지 메소드가 포함됩니다.
(1): DOM 레벨 0 이벤트 핸들러 예:

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

var btn=document.getElementById("mybtn") //Get 버튼 참조

btn.onclick=function(){
alert('clicked');
alert(this.id) // mybtn


way 추가된 이벤트 핸들러는 이벤트 흐름의 버블링 단계에서 처리됩니다.

DOM0 레벨 메소드로 지정된 이벤트 핸들러 삭제:
btn.onclick=null; // 이벤트 핸들러 삭제
}
(2):DOM2 레벨 이벤트 핸들러
DOM2 레벨 이벤트 이벤트 핸들러를 지정하고 제거하는 작업을 처리하기 위해 addEventListener() 및 RemoveEventListener()라는 두 가지 메서드가 정의되어 있습니다. 이 두 가지 메소드는 모든 DOM 노드에 포함되어 있으며 둘 다 처리할 이벤트 이름, 이벤트 핸들러로서의 함수 및 부울 값이라는 3개의 매개변수를 허용합니다. 마지막 매개변수가 true이면 이벤트 핸들러가 캡처 단계에서 호출된다는 의미이고, fasle이면 이벤트 핸들러가 버블링 단계에서 호출된다는 의미입니다.
예:

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

var btn= document.getElementById( "mybtn");

btn.addEventListener("click",function(){
alert(this.id);
},false); > DOM2 수준 사용 이벤트 핸들러의 주요 이점은 여러 이벤트 핸들러를 추가할 수 있다는 것입니다.
예:

코드 복사

코드는 다음과 같습니다. var btn= document.getElementById( "mybtn"); btn.addEventListener("click",function(){ alert(this.id);

},false);

btn.addEventListener(" click",function (){
alert("hello world!");
},false);


여기에는 버튼에 대한 두 개의 이벤트 핸들러가 추가됩니다. 두 개의 이벤트 핸들러는 발생 순서대로 실행됩니다.
addEventListener()를 통해 추가된 타임 핸들러는 RemoveEventListener()를 통해서만 제거할 수 있습니다. 제거 시 전달된 매개변수는 추가 시 사용된 매개변수와 동일합니다. 이는 또한 addEventListener()를 통해 추가된 익명 함수를 제거할 수 없음을 의미합니다.
예:

코드 복사

코드는 다음과 같습니다. var btn= document.getElementById( "mybtn"); btn.addEventListener("click",function(){ alert(this.id);

},false); >btn.removeEventListener("click",function(){ //이런 식으로 쓰는 것은 쓸모가 없습니다(두 번째는 처음과 완전히 다른 함수이기 때문입니다)

alert(this.id);
}, false);


해결책:




코드를 복사하세요

코드는 다음과 같습니다.

var btn=document.getElementById("mybtn"); var hander=function(){ alert(this.id) btn.addEventListener( "클릭" ,hander,false);

btn.removeEventListener("click",hander,false); // 유효함

참고: 여기서 세 번째 매개변수는 모두 false이며 버블링 단계에서 추가됩니다. 대부분의 경우 이벤트 핸들러는 다양한 브라우저와의 호환성을 극대화하기 위해 이벤트 흐름의 버블링 단계에 추가됩니다.
3: IE 이벤트 핸들러
IE는 DOM의 메소드와 유사한 두 가지 메소드(attachEvent() 및 detachEvent())를 구현합니다. 두 메소드 모두 이벤트 핸들러 이름과 이벤트 핸들러 함수라는 동일한 두 매개변수를 허용합니다. IE는 시간 버블링만 지원하므로, AttachEvent()를 통해 추가된 모든 이벤트 핸들러는 버블링 단계에 추가됩니다.
예:

세:

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

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

참고: AttachEvent() 함수의 첫 번째 매개변수는 DOM의 addEventListener()에서 "click"이 아니라 "onclick"입니다.
attachEvent() 메서드를 사용하여 요소에 여러 이벤트 핸들러를 추가할 수도 있습니다.
예:

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

var btn= document.getElementById( "mybtn");
btn.attachEvent("onclick",function(){
alert("clicked");
}); ,function() {
alert("hello world!");
});

AttachEvent()는 여기서 두 번 호출되어 동일한 버튼에 대해 두 개의 다른 이벤트 핸들러를 추가합니다. 그러나 DOM 메서드와 달리 이러한 이벤트 핸들러는 추가된 순서대로 실행되지 않고 역순으로 실행됩니다. 이 예에서 버튼을 클릭하세요. 가장 먼저 보이는 것은 "hello world"이고 그 다음에는 "클릭"입니다.
attachEvent()를 사용하여 추가된 이벤트는 동일한 매개변수가 제공되면 detachEvent()에 의해 제거될 수 있습니다.

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

var btn=document.getElementById("mybtn ");
var hander=function(){
alert("clicked");
}
btn.detachEvent("onclick",hander}); // 제거

위의 세 가지 메소드는 현재 주요 이벤트 핸들러 메소드입니다. 이 내용을 보면 브라우저마다 차이가 있으므로 크로스 브라우저 이벤트 핸들러를 보장하려면 어떻게 해야 할까요?
크로스 브라우저 방식으로 이벤트를 처리하기 위해 많은 개발자가 브라우저 차이를 격리할 수 있는 Javascript 라이브러리를 사용하고 일부 개발자는 가장 적절한 이벤트 처리 방법을 직접 개발합니다.
여기에는 EventUtil 개체가 제공되어 탐색 중 차이점을 처리하는 데 사용할 수 있습니다.

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

var EventUtil = {
addHandler: function(element, type, handler){ // 이 메서드는 3개의 매개변수(작업할 요소, 이벤트 이름, 이벤트)를 허용합니다. handler function
if (element.addEventListener){ //전달된 요소에 DOM2 레벨 메소드가 있는지 확인
element.addEventListener(type, handler, false) // 존재하는 경우 이 메소드 사용
} else if (element .addEvent){ // IE 메서드가 있는 경우
element.attachEvent("on" type, handler) // 여기서는 이벤트 유형이 접두사로 붙어야 합니다. "켜기"로.
} else { // 마지막 가능성은 DOM0 레벨을 사용하는 것입니다.
element["on" type] = hander
}
},

removeHandler: function(element, type, handler){ // 이전에 추가한 이벤트 핸들러를 삭제하는 메소드입니다.
if (element.removeEventListener){ //전달된 요소가 존재하는지 확인합니다. DOM2 레벨 method
element.removeEventListener(type, handler , false); // 존재하는 경우 이 메소드를 사용
} else if (element.detachEvent){ // 존재하는 경우 IE의 메소드
element.detachEvent("on" type, handler); 그런 다음 IE 방법을 사용하십시오. 여기서 이벤트 유형 앞에는 "on"이 붙어야 합니다.
} else { // 마지막 가능성은 DOM0 및 메서드를 사용하는 것입니다(최신 브라우저에서는 여기에 있는 코드가 실행되지 않아야 함)
element["on" type] =
}
}
};

다음과 같이 EventUtil 개체를 사용할 수 있습니다.

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

var btn =document.getElementById("mybtn");
var hander= function(){
alert("clicked")
}//생략됨 코드 일부가 생략됨
EventUtil.addHandler(btn,"click",hander);
//여기서 코드 일부가 생략됨
EventUtil.removeHandler(btn,"click",hander); //삭제 전 추가된 이벤트 핸들러

가 표시됩니다. addHandler, RemoveHandler를 사용하여 이벤트 핸들러를 추가하고 제거하는 것이 매우 편리합니다.