프런트엔드 면접(3) - DOM 이벤트 클래스

기본 개념:

DOM 이벤트 수준

DOM 이벤트 모델:

이벤트 거품 발생

이벤트 캡처

DOM 이벤트 스트림

DOM 이벤트 캡처의 구체적인 절차 설명

Event 객체의 일반적인 응용 프로그램

사용자 정의 이벤트

1. DOM 이벤트 수준

DOM0: element.onclick=function(){}

DOM2:element.addEventListener('click',function(){},false)(true는 포획단계에서 촉발하고false는 거품단계에서 촉발하며 기본은false)이다.

DOM3:element.addEventListener('keyup',function(){},false)(true는 포획단계에서 촉발하고false는 거품단계에서 촉발하며 기본적으로false)는 많은 사건 유형을 증가시켰다.

2. DOM 이벤트 모델

이벤트 캡처: 대상 요소 위에서 아래로 찾기

이벤트 거품: 대상 요소에서 위로 찾기

3. DOM 이벤트 흐름: 브라우저가 현재 페이지와 사용자를 상호작용하는 과정에서 발생하는 과정으로 완전한 이벤트 흐름은 세 단계로 나뉜다.

이벤트 캡처

목표 단계

이벤트 거품 발생

이벤트는 포획을 통해 목표 요소에 도달하는데 이때가 목표 단계이고 세 번째 단계는 목표 요소에서 윈도우 대상에 업로드하는 것이다.

4. DOM 이벤트 캡처의 구체적인 절차 설명

window-->document-->html(js로 html 노드를 표시하는 방법:document.documentElement;)-->body-->·--> 목표 요소

    

        
         
    
    
        var ev = document.getElementById("ev");
        ev.addEventListener('click', function() {
            console.log("ev capture");
        }, true);
        window.addEventListener('click', function() {
            console.log("window capture");
        }, true);
        document.addEventListener('click', function() {
            console.log("document capture");
        }, true);
        document.documentElement.addEventListener('click', function() {
            console.log("html capture");
        }, true);
        document.body.addEventListener('click', function() {
            console.log("body capture");
        }, true);
    


//  
// window capture
// document capture
// html capture
// body capture
// ev capture

5. 이벤트 대상의 흔한 응용

event.preventDeault(): 기본 동작을 막습니다.

event.stopPropation(): 사건의 거품을 막는다.

event.stopImmeidiatePropagation(): 다른 이벤트를 막는다(한 버튼이 두 개 이상의 이벤트를 연결한다면: 이벤트 a, 이벤트 b,....현재 장면이 버튼을 누르려고 할 때 이벤트 a만 실행하고 다른 이벤트는 실행하지 않으면 이벤트 a의 함수에 event.stopImmeidiatePropagation()를 추가하면 실현할 수 있다.

event.currentTarget: 현재 귀속된 이벤트;

event.target: 현재 클릭된 요소(초기 i버전은 지원되지 않으며 초기 i용event.srcElement;

6. 사용자 정의 이벤트(아날로그 이벤트)

사용자 정의 이벤트와 사용자 정의 트리거 이벤트 과정(이벤트 이름만 지정할 수 있고 이벤트에 데이터를 추가할 수 없음)

// eve 
var eve = new Event("custome");
// ev DOM 
ev.addEventListener("custome",function(){
    console.log("custome");
},false);
//  ， 
ev.dispatchEvent(eve);
//  5 
setTimeout(function() {
    ev.dispatchEvent(eve);
}, 5000);

CustomeEvent(이벤트 이름을 지정하는 것 외에 이벤트에 Object를 추가하여 사용자 정의 매개 변수를 전달할 수 있음).