[JS] 동적요소 이벤트 (버블링과 캡처링)

jiseong·2021년 8월 5일
1

T I Learned

목록 보기
21/291

동적요소 이벤트

화면이 로딩되고 나면, 기존의 요소들에는 작성된 이벤트가 바인딩 된 상태이다. 그렇다면, 어떻게 동적으로 생성된 요소에 이벤트를 발생시킬까?
이 때, 이벤트 버블링이라는 개념이 필요하다.

버블링과 캡처링

  • 어떤 요소에서 이벤트가 발생했을 때, 이벤트 전파가 일어나는데 전파 방향에 따라 버블링과 캡처링으로 구분된다.

아래 예시코드를 통해 버블링과 캡처링을 알아보자.

📝예시 코드

<body>
    <div>
        <button>Click Me!</button>
    </div>
    <script>
        const div = document.querySelector('div');
        const button = document.querySelector('button');
    
        // 버블링
        div.addEventListener('click', function () {
            console.log('Handler for div.');
        });
    
        // 버블링
        button.addEventListener('click', function () {
            console.log('Handler for button.');
        });

        // 캡처링
        div.addEventListener('click', function () {
            console.log('Handler for div.');
        },true);
    
        // 캡처링
        button.addEventListener('click', function () {
            console.log('Handler for button.');
        },true);
    </script>
</body>

1) 버블링(Bubbling)

자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 것버블링이라 한다.

사용자가 버튼을 클릭하면, 다음과 같은 순서로 버블링이 발생한다.

    1. <button>의 이벤트 핸들러가 동작한다.
    1. 바깥의 <div>의 이벤트 핸들러가 동작한다.
    1. 4, 5. Document에 도달할 때까지, 각 요소에 할당된 이벤트 핸들러가 동작한다.

2) 캡처링(capturing)

자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 이벤트를 발생시킨 자식 요소까지 도달하는 것캡처링이라 한다.

사용자가 버튼을 클릭하면, 다음과 같은 순서로 캡처링이 발생한다.

    1. 2, 3. Document에서 body까지, 각 요소에 할당된 이벤트 핸들러가 동작한다.
    1. 바깥의 <div>의 이벤트 핸들러가 동작한다.
    1. <button>의 이벤트 핸들러가 동작한다.

❓ 참조
캡처링 단계에서 이벤트를 잡아내려면 위의 코드에서 addEventListener의 capture 옵션을 true로 설정해야 한다.

addEventListener('click', function () { ... }, true);
/*
false이면(default 값) 핸들러는 버블링 단계에서 동작
true이면 핸들러는 캡처링 단계에서 동작
*/

❓ 참조
버블링과 캡처링은 둘 중에 하나만 발생하는 것이 아니라 캡처링부터 시작하여 버블링으로 종료한다.


그렇다면 버블링이 어떻게 동적으로 생성된 요소에 이벤트를 발생시킬 수 있을까?

아래 예시코드를 통해 알아보자.

📝예시 코드

<body>
    <div id="button-container">

    </div>
    <script>
        const element = document.querySelector("#button-container");

        // event is added for the parent of #submit-button
        element.addEventListener('click', function(e) {
            if(e.target.id === 'submit-button') {
                alert('Hello');
            }
        });
        // #submit-button is dynamically added with Javascript
        element.innerHTML = '<button id="submit-button">Submit</button>';
    </script>
</body>

동적으로 생성된 상태에서 submit-button id를 가진 button을 클릭한 경우에 아래의 과정이 일어난다.

    1. button에서 click 이벤트를 잡지 못하고 div으로 이벤트가 버블링 된다.
    1. div에서 click 이벤트를 잡아서 아래 코드를 실행하며 Hello 대화상자를 띄운다.
    element.addEventListener('click', function(e) {
       if(e.target.id === 'submit-button') {
           alert('Hello');
       }
    });

이처럼 이벤트를 발생시킨 요소의 부모 요소에도 영향(버블링)을 미치기 때문에 동적으로 생성된 요소에도 이벤트 발생이 가능한 것이다.


Reference

0개의 댓글