DOM 의 사건 대상 을 깊이 이해 하 다.

1. DOM 의 어떤 이 벤트 를 터치 할 때 이벤트 처리 프로그램 함수 에서 이벤트 대상 이벤트 가 발생 합 니 다. 이 대상 에는 이벤트 와 관련 된 모든 정보 가 포함 되 어 있 습 니 다.사건 을 야기 하 는 요소, 사건 의 유형 및 기타 특정 사건 과 관련 된 정 보 를 포함한다.먼저 예 를 들 어:

var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
    alert(event.type); //"click"
}
btn.addEventListener("click", function(event) {
    alert(event.type); //"click"
}, false);

이벤트. type 속성 은 이벤트 형식 을 표시 합 니 다.이벤트 의 속성 currentTarget 은 이벤트 처리 프로그램 이 현재 이 벤트 를 처리 하고 있 는 요 소 를 의미 합 니 다. target 은 이벤트 의 목 표를 의미 합 니 다.이벤트 처리 프로그램 내부 에서 대상 this 는 currentTarget 의 값 과 같 고 target 은 이벤트 의 실제 목표 만 포함 합 니 다.예 를 들 어:

var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
    alert(event.currentTarget === this); //true
    alert(event.target === this); //true
};

이벤트 처리 프로그램 을 대상 요소 btn 에 직접 지정 하면 this, currentTarget 과 target 은 같은 값 을 포함 합 니 다.이벤트 처리 프로그램 을 btn 의 부모 노드 에 등록 하면 (예 를 들 어 document. body):

document.body.onclick = function(envent) {
    alert(event.currentTarget === document.body); //true
    alert(this === document.body); //true
    alert(event.target === document.getElementById("myBtn")); //true
};

target 요 소 는 btn 요소 와 같 습 니 다. click 이벤트 의 진정한 목표 이기 때문에 이벤트 처리 프로그램 을 등록 하지 않 았 기 때문에 결과적으로 click 이 document. body 에 거품 을 일 으 켜 그곳 에서 사건 이 처리 되 었 습 니 다.
하나의 함수 로 여러 이 벤트 를 처리 합 니 다:

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

이벤트 에는 특정 이벤트 의 기본 행동 을 막 는 preventDefault () 방법 이 있 습 니 다.
이벤트. stopPropagation () 방법 은 이벤트 가 DOM 차원 에서 의 전 파 를 즉시 중단 하 는 데 사 용 됩 니 다. 즉, 추가 이벤트 캡 처 나 거품 을 취소 하 는 것 입 니 다.예 를 들 면:

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

이벤트. stopPropagation () 을 호출 하지 않 으 면 두 개의 경고 상자 가 나타 납 니 다.그러나 이 방법 을 사용 하면 click 이벤트 가 document. body 에 전파 되 지 않 기 때문에 이 요소 의 onclick 이벤트 처리 프로그램 을 실행 하지 않 습 니 다.
2. IE 의 이벤트 대상 이벤트 대상 이 window 대상 으로 익숙 한 존 재 를 살 펴 보 자.예:

var btn = document.getElementById("myBtn");
btn.onclick = function() {
    var event = window.event;
    alert(event.type); //"click"
};
btn.attachEvent("click", function(event) {
    alert(event.type); //"click"
}); //     window  event  

IE 에서 이벤트 가 이벤트 목 표를 가 져 오 는 속성 은 srcElement 입 니 다.:

var btn = document.getElementById("myBtn");
btn.onclick = function() {
    var event = window.event;
    alert(event.srcElement === this); //true
};
btn.attachEvent("onclick", function(event) {
    alert(event.srcElement === this); //false
});

this 대상 은 이벤트 처리 프로그램의 역할 영역 에 따라 확정 되 기 때문에 위의 두 개 는 다르다.event. returnValue 속성 은 DOM 의 preventDefault () 방법 에 해당 합 니 다. returnValue 를 false 로 설정 하면 기본 행동 을 막 을 수 있 습 니 다.

var link = document.getElementById("myLink");
link.onclick = function() {
    window.event.returnValue = false;
} //        

이벤트. cancelBubble 속성 은 DOM 의 stopPropagation () 방법 과 같은 역할 을 하 며 이벤트 의 거품 을 멈 추 는 데 사 용 됩 니 다.IE 는 이벤트 캡 처 를 지원 하지 않 기 때문에 이벤트 거품 을 없 앨 수 밖 에 없 지만 stopPropagation () 은 이벤트 캡 처 와 거품 을 동시에 지원 할 수 있 습 니 다.

var btn = document.getElementById("myBtn");
btn.onclick = function() {
    alert("Clicked");
    window.event.cancelBubble = true;
};
document.body.onclick = function() {
    alert("Body Clicked");
};

cancelBubble 을 true 로 설정 하면 이벤트 가 거품 을 통 해 document. body 에 등 록 된 이벤트 처리 프로그램 을 실행 하 는 것 을 막 을 수 있 습 니 다. 경고 상자 만 나타 납 니 다.
3. 크로스 브 라 우 저의 이벤트 대상

var EventUtil = {
    getEvent: function(event) {
        return event ? event : window.event;
    },

    getTarget: function(event) {
        return event.target || event.srcElement;
    },

    preventDefault: fuction(event) {
        if(event.preventDefaule()) {
            event.preventDefaule();
        } else {
            event.returnValue = false;
        }
    },

    stopPropagation: function(event) {
        if(event.stopPropagation()) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

btn.onclick = function(event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event); //  
}

4. 이벤트 처리 프로그램 이 너무 많 으 면 메모 리 를 사용 하여 성능 이 떨 어 집 니 다.해결 방법 은 사건 으로 위탁 하 는 것 이다.하나의 사건 처리 절 차 를 만들어 특정한 유형의 모든 사건 을 관리 하 는 것 이다.예 를 들 어 click 이 벤트 는 document 단계 까지 계속 거품 을 일 으 킵 니 다. 즉, 우 리 는 전체 페이지 에 onclick 이벤트 처리 프로그램 을 만 들 수 있 습 니 다. 클릭 한 요소 마다 이벤트 처리 프로그램 을 추가 하지 않 아 도 됩 니 다.예 를 들 면:

"lists">
    
"goSomewhere">Go
    
"doSomething">Do
    
"sayHi">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.google.com";
});
EventUtil.addHandler(item2, "click", function(event) {
    alert("Me");
});
EventUtil.addHandler(item3, "click", function(event) {
    alert("Hi");
});

만약 에 복잡 한 웹 응용 프로그램 에서 이런 방식 을 사용한다 면 수많은 코드 가 이벤트 처리 프로그램 을 추가 할 수 있 습 니 다. 그러나 이벤트 위탁 기술 로 해결 할 수 있 습 니 다. 즉, DOM 트 리 의 최대한 높 은 차원 에서 이벤트 처리 프로그램 을 추가 하 는 것 입 니 다.

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

    switch(target.id) {
        case "goSomewhere":
            location.href = "http://www.google.com";
            break;
        case "doSomething":
            alert("Me");
            break;
        case "sayHi":
            alert("Hi");
            break;
    }
});

이 벤트 를 목표 의 부모 요소 나 조상 요소 에 의뢰 하고 l 에 onclick 이벤트 처리 프로그램 을 추가 합 니 다. 모든 목표 요 소 는 이 요소 의 하위 노드 이 고 onclick 사건 도 지나 갑 니 다. 이벤트 가 거품 이 생 길 수 있 기 때문에 이 벤트 를 클릭 하면 결국 ul 요소 의 처리 이벤트 프로그램 에 의 해 처 리 됩 니 다.이벤트 의뢰 기술 로 이벤트 처리 프로그램 만 추가 되 었 고 사용 하 는 메모리 가 더 적 습 니 다.
이벤트 처리 프로그램 을 제거 하고 필요 하지 않 을 때 제거 하 며 성능 도 향상 시 킬 수 있 습 니 다. 만약 메모리 에 시간 이 지나 도 사용 하지 않 는 빈 이벤트 처리 프로그램 이 남아 있다 면 메모리 와 성능 문 제 를 일 으 킬 수 있 습 니 다.
저 희 는 보통 removeChild () 와 replace Child () 방법 을 사용 하지만 innerHTML 로 페이지 의 일부분 을 교체 하 는 경우 가 많 습 니 다. 이벤트 처리 프로그램 이 있 는 요 소 를 innerHTML 로 원래 의 내용 을 대체 하면 원래 요소 에 추 가 된 이벤트 처리 프로그램 을 쓰레기 로 회수 할 수 없습니다.예:

<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function() {
        //      
        document.getElementById("myDiv").innerHTML = "Changing...";
    }
script>

단 추 를 누 르 면 단 추 를 제거 하고 메시지 로 바 꾸 는 것 이 개발 에서 유행 하지만 문 제 는 버튼 이 페이지 에서 제거 되 었 을 때 이벤트 처리 프로그램 을 가지 고 있다 는 것 이다.innerHTML 을 설정 하면 단 추 를 옮 길 수 있 지만 이벤트 처리 프로그램 은 단추 와 인용 관 계 를 유지 하고 있 습 니 다. 일부 브 라 우 저 는 이벤트 처리 프로그램 에 대한 요 소 를 메모리 에 저장 하여 빈 이벤트 처리 프로그램 을 만 들 수 있 습 니 다. 어떤 이벤트 가 곧 삭 제 될 것 이라는 것 을 알 고 있다 면 수 동 으로 처리 하 는 것 이 좋 습 니 다.

<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function() {
        //      
        btn.onclick = null; //        
        document.getElementById("myDiv").innerHTML = "Changing...";
    }
script>