학습 노트: 자바 스 크 립 트 의 이벤트 흐름 과 이벤트 처리 프로그램

자 바스 크 립 트 와 HTML 간 의 상호작용 은 사건 을 통 해 이 루어 진다.
이벤트: 문서 나 브 라 우 저 창 에서 발생 하 는 특정한 상호작용 순간.
사건 발생 시 해당 코드 를 실행 할 수 있 도록 디텍터 (또는 처리 프로그램 으로 사건 을 예약 할 수 있 습 니 다) 를 사용 할 수 있 습 니 다.
1. 이벤트 흐름
이벤트 흐름: 페이지 에서 이벤트 의 순 서 를 받 습 니 다.
IE 와 넷 스 케 이 프 개발 팀 은 차이 가 많 지 않 은 것 은 완전히 상 반 된 사건 흐름 이라는 개념 을 제시 했다.

IE: 사건 거품 흐름

Netscape: 이벤트 캡 처 흐름

1.1 사건 거품 발생
이벤트 거품 (event bubbling): 이벤트 가 시 작 될 때 가장 구체 적 인 요소 (문서 에 포 함 된 계층 이 가장 깊 은 노드) 에서 받 은 다음 에 단계별 로 구체 적 이지 않 은 노드 (문서) 로 전 파 됩 니 다.
1.2 이벤트 캡 처
이벤트 캡 처 (event capturing): 구체 적 이지 않 은 노드 는 이 벤트 를 더 일찍 받 아야 하고 가장 구체 적 인 노드 는 마지막 에 이 벤트 를 받 아야 합 니 다.
사건 포획 의 의 도 는 사건 이 예 정 된 목표 에 도달 하기 전에 그것 을 포획 하 는 데 있다.
1.3 DOM 이벤트 흐름
"DOM 2 급 이벤트" 에 규정된 이벤트 흐름 은 세 단 계 를 포함한다.

1.       
2.       
3.       

2. 이벤트 처리 프로그램
이 벤트 는 사용자 나 브 라 우 저 자체 가 실행 하 는 동작 입 니 다.click, load, mouseover.어떤 이벤트 에 응답 하 는 함 수 를 이벤트 처리 프로그램 (또는 이벤트 탐지 기) 이 라 고 합 니 다.
2.1 HTML 이벤트 처리 프로그램
어떤 요소 가 지원 하 는 모든 이 벤트 는 해당 이벤트 처리 프로그램 과 같은 이름 의 HTML 특성 을 사용 하여 지정 할 수 있 습 니 다.

단 추 를 누 르 면 경고 상 자 를 표시 합 니 다.onclick 특성 을 지정 하고 자바 스 크 립 트 코드 를 값 으로 정의 합 니 다.
HTML 에서 정 의 된 이벤트 처리 프로그램 은 실행 할 구체 적 인 동작 을 포함 할 수도 있 고 페이지 의 다른 곳 에서 정 의 된 스 크 립 트 를 호출 할 수도 있 습 니 다.

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

이벤트 처리 프로그램의 코드 가 실 행 될 때 전역 역할 영역 에 있 는 모든 코드 에 접근 할 수 있 습 니 다.
단점:

시차 문제 가 있다.사용 자 는 이벤트 처리 프로그램 이 해석 되 기 전에 이벤트 가 발생 했 습 니 다.

확장 이벤트 처리 프로그램의 역할 도 메 인 체인 은 서로 다른 브 라 우 저 에서 서로 다른 결 과 를 가 져 올 수 있 습 니 다.

HTML 과 JavaScript 코드 가 긴밀 하 게 결합 되 어 있 습 니 다.

2.2 DOM 0 급 이벤트 처리 프로그램
JavaScript 를 통 해 이벤트 처리 프로그램 을 지정 하 는 전통 적 인 방식 은 하나의 함 수 를 이벤트 처리 프로그램 속성 에 할당 하 는 것 입 니 다.
이 방법 은 이벤트 처리 프로그램 할당 이 라 고 불 리 며 4 세대 웹 브 라 우 저 에 나타난다.
모든 요소 (window 와 document 포함) 는 자신의 이벤트 처리 프로그램 속성 을 가지 고 있 으 며, 속성 은 보통 모든 소문 자 입 니 다. 예 를 들 어 onclick.이 속성의 값 을 함수 로 설정 하면 이벤트 처리 프로그램 을 지정 할 수 있 습 니 다.

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

DOM 0 급 방법 으로 지정 한 이벤트 처리 프로그램 을 삭제 할 수 있 습 니 다.

btn.onclick = null;    //         

2.3 DOM 2 급 이벤트 처리 프로그램
"DOM 2 급 이벤트" 는 이벤트 처리 프로그램 을 지정 하고 삭제 하 는 두 가지 방법 을 정의 합 니 다.

addEventListener()

removeEventListener()

모든 DOM 노드 는 이 두 가지 방법 을 포함 하고 세 개의 인 자 를 받 아들 입 니 다.

처리 할 사건 명

이벤트 처리 프로그램의 함수

1 개의 불 값:

true: 포획 단계 호출 이벤트 처리 프로그램

false: 거품 단계 호출

단추 에 onclick 이벤트 처리 프로그램 추가:

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

DOM 2 급 방법 으로 이벤트 처리 프로그램 을 추가 하 는 주요 장점 은 여러 개의 이벤트 처리 프로그램 을 추가 할 수 있다 는 것 이다.
addEventListener () 로 추 가 된 이벤트 처리 프로그램 은 removeEventListener () 로 만 제거 할 수 있 습 니 다. 제거 할 때 들 어 오 는 매개 변 수 는 추가 할 때의 매개 변수 와 같 습 니 다.따라서 addEventListener () 로 추 가 된 익명 함 수 는 제거 할 수 없습니다.
대부분의 경우 이벤트 처리 프로그램 을 이벤트 흐름 의 거품 단계 에 추가 하여 각종 브 라 우 저 를 최대한 호 환 할 수 있 습 니 다.
2.4 IE 이벤트 처리 프로그램
IE 는 DOM 과 유사 한 두 가지 방법 을 실현 했다.

attachEvent()

detachEvent()

두 개의 인 자 를 받 아들 입 니 다: 이벤트 처리 프로그램 이름, 이벤트 처리 프로그램 함수 가 이러한 방법 으로 추 가 된 이벤트 처리 프로그램 은 거품 단계 에 추 가 됩 니 다.

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

메모: attachEvent () 의 첫 번 째 매개 변 수 는 "onclick" 입 니 다. addEventListener () 방법 중의 "click" 이 아 닙 니 다.
IE 에서 attachEvent () 를 사용 하 는 것 과 DOM 0 급 방법 을 사용 하 는 것 은 이벤트 처리 프로그램의 역할 영역 에 있 습 니 다.

DOM 0 급 방법: 이벤트 처리 프로그램 은 소속 요소 의 역할 영역 에서 실 행 됩 니 다

attachEvent () 방법: 이벤트 처리 프로그램 은 전역 역할 영역 에서 실 행 됩 니 다. this 는 window 와 같 습 니 다.

2.5 크로스 브 라 우 저의 이벤트 처리 프로그램
이벤트 Util 이라는 대상 이 상황 에 따라 각각 DOM 0 급 방법, DOM 2 급 방법 또는 IE 방법 으로 이 벤트 를 추가 하 는 방법 addHandler () 를 만 듭 니 다.
addHandler () 방법 은 3 개의 인 자 를 받 습 니 다.

조작 할 요소

이벤트 이름

이벤트 처리 프로그램 함수

이에 대응 하 는 방법 은 removeHandler () 로 같은 인 자 를 받는다.

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;
        }
    }
}

이 두 가지 방법 은 먼저 들 어 오 는 요소 에 DOM 2 급 방법 이 있 는 지 확인 합 니 다. DOM 2 급 방법 이 있 으 면 이 방법 을 사용 합 니 다. IE 방법 이 있 으 면 두 번 째 방안 을 사용 합 니 다.
아래 와 같이 EventUtil 대상 을 사용 합 니 다:

var btn = document.getElementById("myBtn");
var handler = function() {
    alert("Clicked");
}
EventUtil.addHandler(btn, "click", handler);
EventUtil.removerHandler(btn, "click", handler);