JavaScript 고급 프로 그래 밍 학습 노트 - 이벤트

HTML 이벤트 처리 프로그램

<input type="button" value="Click Me" onclick"showMessage()"/>

HTML 을 통 해 이벤트 처리 프로그램 을 지정 하 는 단점 은 HTML 과 자바 스 크 립 트 코드 가 긴밀 하 게 결합 되 어 있다 는 것 이다.이벤트 처리 프로그램 을 바 꾸 려 면 HTML 코드 와 자 바스 크 립 트 코드 두 곳 을 바 꿔 야 합 니 다.
DOM 0 급 이벤트 처리 프로그램

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

여기 서 우 리 는 문서 대상 을 통 해 버튼 의 인용 을 얻 은 다음 에 OnClink 이벤트 처리 프로그램 을 지정 합 니 다.그러나 이 코드 들 이 실행 되 기 전에는 이벤트 처리 프로그램 을 지정 하지 않 기 때문에 이 코드 들 이 페이지 에 버튼 뒤에 있 으 면 한동안 아무리 눌 러 도 반응 이 없 을 수 있 습 니 다.DOM 0 급 방법 으로 지정 한 이벤트 처리 프로그램 은 요소 의 방법 으로 여 겨 집 니 다.따라서 이때 의 이벤트 처리 프로그램 은 요소 의 역할 영역 에서 실 행 됩 니 다.다시 말 하면 프로그램의 this 는 현재 요 소 를 참조 합 니 다.예 를 들 어 보 겠 습 니 다.

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

DOM 0 레벨 방법 으로 지정 한 이벤트 처리 프로그램 을 삭제 할 수도 있 습 니 다. 아래 와 같이 이벤트 처리 프로그램 속성의 값 을 Null 로 설정 하면 됩 니 다.

btn.onclick=null;

DOM 2 급 이벤트 처리 프로그램
"DOM 2 급 이벤트" 는 이벤트 처리 프로그램 을 지정 하고 삭제 하 는 두 가지 방법 을 정의 합 니 다. addEventListener () 와 removeEventListener ();DOM 2 급 방법 으로 이벤트 처리 프로그램 을 추가 하 는 주요 장점 은 여러 개의 이벤트 처리 프로그램 을 추가 할 수 있다 는 것 이다.

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 handler=function(){
alert(this.id);
}
btn.addEventListener("click",handler,false);

btn.removeEventListener("click",handler,false); //  

IE 이벤트 처리 프로그램
IE 는 DOM 과 유사 한 두 가지 방법 을 실현 했다. 즉, attachEvent () 와 detachEvent () 이다.
이벤트 개체
DOM 을 호 환 하 는 브 라 우 저 는 이벤트 대상 을 이벤트 처리 프로그램 에 전송 합 니 다.이벤트 처리 프로그램 이 어떤 방법 (DOM 0 급 또는 DOM 2 급) 을 사용 하 든 이벤트 대상 에 전 송 됩 니 다.다음 의 예 를 보십시오.

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

btn.onclick=function(event){
alert(event.type); //"click"
};

btn.addEventListener("click",function(event){
alert(event.type); //"click"
},false);

한 함수 로 여러 이 벤트 를 처리 해 야 할 때 type 속성 을 사용 할 수 있 습 니 다. 예 를 들 어:

var btn=document.getElementById("myBtn");
var handler=function(event){
switch(event.type){
case "click":
alert("Clicked");break;
case "mouseover":
alert("mouseover");break;
case "mouseout":
alert("mouseout");break;
}
}
btn.onclick=handler;
btn.onmouseover=handler;
btn.onmouseout=handler;

특정 이벤트 의 기본 행동 을 막 으 려 면 preventDefault () 방법 을 사용 할 수 있 습 니 다.

var link=document.getElementById("myLink");
link.onclick=function(event){
event.preventDefault();
}

cancelable 속성 이 true 로 설 정 된 이벤트 만 preventDefault () 를 사용 하여 기본 행동 을 취소 할 수 있 습 니 다.
이벤트 종류
사용자 가 한 페이지 에서 다른 페이지 로 전환 하면 unload 이벤트 가 발생 합 니 다.같은 요소 에서 mousedown 이벤트 와 mouseup 이 벤트 를 연이어 촉발 해야만 click 이 벤트 를 촉발 할 수 있 습 니 다.DOM 의 button 속성 은 다음 과 같은 세 가지 값 이 있 을 수 있 습 니 다.
이벤트 의뢰
'사건 처리 절차 가 너무 많다' 는 문제 에 대한 해결 방안 은 바로 사건 의뢰 이다.사건 의뢰 는 사건 의 거품 을 이용 하여 하나의 사건 처리 프로그램 만 지정 하면 특정한 유형의 모든 사건 을 관리 할 수 있다.예 를 들 어 click 사건 은 document 단계 까지 거품 이 생 길 수 있 습 니 다.즉, 우 리 는 전체 페이지 에 onclick 이벤트 처리 프로그램 을 지정 할 수 있 으 며, 클릭 할 수 있 는 모든 요소 에 이벤트 처리 프로그램 을 추가 하지 않 아 도 된다.다음 코드 를 예 로 들 면:

<ul id="myLinks">
<li id="goSomewhere">Go somewhere</li>
<li id="doSomething">Do something</li>
<li id="sayHi">Say Hi </li>
</ul>

var list=document.getElementById("myLinks");

EventUtil.addHandler(list,"click",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);

switch(target.id){
case "doSomething":
document.tile="i changed the document's title";break;
case "goSomewhere":
location.href="http://www.wrox.com";break;
case "sayHi":
alert("hi");break;
}
}

이벤트 의뢰 기술 을 사용 하기에 가장 적합 한 이 벤트 는 click, mousedown, mouseup, keydown, keypress 를 포함한다.