JS | 이벤트 위임 원리

이벤트 위임의 원리가 되는 버블링 , 캡처링

이벤트 캡쳐링 

부모, 자식 모두 이벤트가 걸려있을 때 실행순서가 부모 -> 자식으로 실행되는 특징

addEventListener()로만 구현이 가능하다

이벤트 버블링 

부모, 자식 모두 이벤트가 걸려있을 때 실행순서가 자식 -> 부모로 실행되는 특징

버블링페이지에서만 이벤트를 실행

 

캡쳐링은 이벤트를 실행시키지 않음

 

 

 

 

 

예제 1 )

 

style ↓↓↓

<style>
        .func1 {width:300px;height:300px;background-color: red;}
        .func2 {width:200px;height:200px;background-color: blue;}
        .func3 {width:100px;height:100px;background-color: yellow;}

    </style>

html

↓↓↓

 <div class="func1">
        <div class="func2">
            <div class="func3">func3자식</div>
        </div>
    </div>

script ↓↓↓

 /*
        DOM에서 이벤트 동작방식은 기본으로 버블링입니다.
        버블링 - 부모, 자식 모두에 이벤트가 있을 때 이벤트가 자식 -> 부모 방향으로 전파되는 특징

        3번 클릭 3 -> 2 -> 1 순으로 실행됩니다.
        */
        // var func1 = document.querySelector(".func1");
        // func1.onclick = function(){
        //     alert("func1");
        // }

        // var func2 = document.querySelector(".func2");
        // func2.onclick = function(){
        //     event.stopPropagation(); //이벤트 버블링 중단
        //     alert("func2");
        // }

        // var func3 = document.querySelector(".func3");
        // func3.onclick = function(){
        //     alert("func3");
        // }

        /*
        이벤트 캡쳐링 -> 부모, 자식에 이벤트가 있을 때, 부모 -> 자식으로 전파되는 특징
        addEventListener() 방식으로만 구현해 줄 수 있습니다.
        */
        var func1 = document.querySelector(".func1");
        var func2 = document.querySelector(".func2");
        var func3 = document.querySelector(".func3");

        func1.addEventListener("click", function() {
            alert("func1");
        }, true);

        func2.addEventListener("click", function() {
            event.stopPropagation();//이벤트 캡쳐링 중단
            alert("func2");
        }, true);

        func3.addEventListener("click", function() {
            alert("func3");
        }, true);

예제 2 ) 이벤트 전파와 여러 클래스

html ↓↓↓

 <section id="section">
        <div class="list">
            <div>
                <span>홍길동</span>
                <button type="button" class="btn sel">선택</button>
                <button type="button" class="btn del">삭제</button>
            </div>
            <div>
                <span>김길동</span>
                <button type="button" class="btn sel">선택</button>
                <button type="button" class="btn del">삭제</button>
            </div>
            <div>
                <span>홍길자</span>
                <button type="button" class="btn sel">선택</button>
                <button type="button" class="btn del">삭제</button>
            </div>
        </div>
    </section>

script ↓↓↓

  var list = document.querySelector(".list");

        //위임을 내려받아 버튼별로 다르게 동작시킴
        list.onclick = function(){

            if(event.target.tagName != "BUTTON")return; //버튼이 아니라면 종료
            
            console.log(event.target.className);
            console.log(event.target.classList);

            var arr = event.target.classList;

            if(arr.contains("sel")){ //선택 버튼
                event.target.previousElementSibling.style.color = "red";
            }else if(arr.contains("del")){ //삭제 버튼
                event.target.parentElement.remove();
            }else if(arr.contains("aaa")){ //aaa 버튼

            }

        }