자 바스 크 립 트 고급 프로 그래 밍 노트 (3)

이벤트
사건 이 불거지다
IE 의 이벤트 흐름 은 이벤트 거품 (event bubbling) 이 라 고 합 니 다. 즉, 사건 이 시 작 될 때 구체 적 인 요소 (문서 에 포 함 된 차원 이 깊 은 노드) 가 받 은 다음 에 단계별 로 구체 적 이지 않 은 노드 (문서) 로 전 파 됩 니 다.
이벤트 캡 처
이벤트 처리 프로그램 (이벤트 디텍터)
HTML 이벤트 처리 프로그램

     function showMessage(){
             alert("Hello world!");
     } 

 

DOM 0 급 이벤트 처리 프로그램

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

DOM 2 급 이벤트 처리 프로그램
"DOM 2 급 이벤트" 는 이벤트 처리 프로그램 을 지정 하고 삭제 하 는 두 가지 방법 을 정의 합 니 다: addEventListener () 와 * removeEventListener () * *.모든 DOM 노드 에는 이 두 가지 방법 이 포함 되 어 있 으 며, 모두 세 개의 인 자 를 받 아들 입 니 다. 처리 할 이벤트 이름, 이벤트 처리 프로그램의 함수 와 불 값 입 니 다.후 이 불 값 매개 변수 가 true 라면 캡 처 단계 에서 이벤트 처리 프로그램 을 호출 하 는 것 을 표시 합 니 다.false 라면 거품 단계 에서 이벤트 처리 프로그램 을 호출 하 는 것 을 의미 합 니 다.

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

IE 이벤트 처리 프로그램
IE 는 DOM 과 유사 한 두 가지 방법 을 실현 했다. 즉, attachEvent () 와 detachEvent () 이다.이 두 가지 방법 은 같은 두 개의 인 자 를 받 아들 입 니 다. 이벤트 처리 프로그램 이름과 이벤트 처리 프로그램 함수 입 니 다.IE8 및 더 빠 른 버 전 은 이벤트 거품 만 지원 하기 때문에 attachEvent () 를 통 해 추 가 된 이벤트 처리 프로그램 은 거품 단계 에 추 가 됩 니 다.

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

* *, attachEvent () 의 첫 번 째 매개 변 수 는 DOM 의 addEventListener () 방법 중의 "click" 이 아 닌 "onclick" 입 니 다. * *IE 에서 attachEvent () 를 사용 하 는 것 과 DOM 0 급 방법 을 사용 하 는 것 은 이벤트 처리 프로그램의 역할 영역 에 있 습 니 다.DOM 0 급 방법 을 사용 하 는 경우 이벤트 처리 프로그램 은 소속 요소 의 역할 영역 에서 실 행 됩 니 다.attachEvent () 방법 을 사용 하 는 경우 이벤트 처리 프로그램 은 전역 역할 영역 에서 실 행 됩 니 다. 따라서 this 는 window 와 같 습 니 다.
크로스 브 라 우 저의 이벤트 처리 프로그램

var EventUtil = {
       addHandler: function(element, type, handler){
         if (element.addEventListener){
             element.addEventListener(type, handler, false);
         } else if (element.attachEvent){ 
            element.attachEvent("on" + type, handler);
         } else { 
            element["on" + type] = handler;
         } 
    }, 
    removeHandler: function(element, type, handler){
         if (element.removeEventListener){
             element.removeEventListener(type, handler, false);
         } else if (element.detachEvent){
             element.detachEvent("on" + type, handler);
         } else {
             element["on" + type] = null;
         }
     }  
}; 
//  
var btn = document.getElementById("myBtn");
 var handler = function(){
     alert("Clicked");
 };
EventUtil.addHandler(btn, "click", handler);   
//           
EventUtil.removeHandler(btn, "click", handler);     

이벤트 개체
DOM 의 이벤트 대상
event
속성 / 방법
유형
읽다 / 쓰다
설명 하 다.
bubbles
Boolean
읽 기만 하 다
사건 의 거품 여 부 를 밝히다
cancelable
Boolean
읽 기만 하 다
이벤트 의 기본 동작 을 취소 할 수 있 는 지 여부 입 니 다.
currentTarget
Element
읽 기만 하 다
이벤트 처리 프로그램 이 현재 이 벤트 를 처리 하고 있 는 요소
defaultPrevented
Boolean
읽 기만 하 다
true 에 preventDefault () 가 호출 되 었 음 을 표시 합 니 다. (DOM 3 급 이벤트 에 추 가 됨)
detail
Integer
읽 기만 하 다
이벤트 와 관련 된 세부 정보
eventPhase
Integer
읽 기만 하 다
이벤트 처리 프로그램 을 호출 하 는 단계: 1 은 포획 단 계 를 나타 내 고, 2 는 목표 에 있 음 을 나타 내 며, 3 은 거품 단 계 를 나타 낸다.
preventDefault()
Function
읽 기만 하 다
이벤트 의 기본 동작 을 취소 합 니 다.cancelable 이 true 라면 이 방법 을 사용 할 수 있 습 니 다.
stopImmediatePropagation()
Function
읽 기만 하 다
이벤트 의 추가 캡 처 나 거품 을 없 애 는 동시에 모든 이벤트 처리 프로그램 이 호출 되 는 것 을 막 습 니 다 (DOM 3 급 이벤트 중 추가)
stopPropagation()
Function
읽 기만 하 다
사건 의 추가 포획 이나 거품 을 취소 합 니 다.bubbles 가 true 라면 이 방법 을 사용 할 수 있 습 니 다.
target
Element
읽 기만 하 다
사건 의 목표
trusted
Boolean
읽 기만 하 다
트 루 에 이벤트 가 브 라 우 저 에서 생 성 되 었 음 을 표시 합 니 다.false 에 이벤트 가 개발 자가 자 바스 크 립 트 를 통 해 생 성 되 었 음 을 표시 합 니 다 (DOM 3 급 이벤트 에 추 가 됨)
type
String
읽 기만 하 다
트리거 된 이벤트 의 종류
view
AbstractView
읽 기만 하 다
이벤트 와 연 결 된 추상 적 인 보기.이벤트 가 발생 한 window 대상 과 같 습 니 다.
크로스 브 라 우 저의 이벤트 대상

var EventUtil = {
       addHandler: function(element, type, handler){
         //     
     },  
    getEvent: function(event){
         return event ? event : window.event;
     },  
    getTarget: function(event){
         return event.target || event.srcElement;
     },
          preventDefault: function(event){
         if (event.preventDefault){
             event.preventDefault();
         } else {
             event.returnValue = false;
         }
     },
       removeHandler: function(element, type, handler){
         //     
     },  
    stopPropagation: function(event){
        if (event.stopPropagation){
             event.stopPropagation();
         } else {
             event.cancelBubble = true;
         }
     }  
}; 
//  
btn.onclick = function(event){
     event = EventUtil.getEvent(event);
 }

이벤트 의뢰

//html  

     
Go somewhere
     
Do something
     
Say hi
 
 
//      
var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething"); 
var item3 = document.getElementById("sayHi");  
EventUtil.addHandler(item1, "click", function(event){
     location.href = "http://www.wrox.com";
 });  
EventUtil.addHandler(item2, "click", function(event){
     document.title = "I changed the document's title";
 });  
EventUtil.addHandler(item3, "click", function(event){
     alert("hi");
 }); 
//    
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.title = "I changed the document's title";
             break;  
        case "goSomewhere":
             location.href = "http://www.wrox.com";
             break;  
        case "sayHi":
             alert("hi");
             break;
     } }); 

이 코드 에서 저 희 는 이벤트 의뢰 를 사용 하여 요소 에 만 onclick 이벤트 처리 프로그램 을 추가 하 였 습 니 다.모든 목록 항목 이 이 요소 의 하위 노드 이 고 이벤트 가 거품 이 생 길 수 있 기 때문에 이 벤트 를 누 르 면 이 함수 로 처 리 됩 니 다.이벤트 목 표 는 누 른 목록 항목 이기 때문에 id 속성 을 검사 하여 적당 한 조작 을 결정 할 수 있 습 니 다.앞에서 이벤트 의뢰 를 사용 하지 않 은 코드 와 비교 하면 이 코드 의 사전 소모 가 더 낮은 것 을 발견 할 수 있 습 니 다. 하나의 DOM 요소 만 얻 었 고 하나의 이벤트 처리 프로그램 만 추 가 했 기 때 문 입 니 다.사용자 에 게 는 최종 결과 가 같 지만 이 기술 이 사용 해 야 할 메모리 가 더 적다.버튼 을 사용 하 는 모든 이벤트 (대부분의 마우스 이벤트 와 키보드 이벤트) 는 이벤트 의뢰 기술 을 사용 하기에 적합 합 니 다.