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

1. DOM 이벤트 수준

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. 이벤트 대상의 흔한 응용

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