이벤트 위임

요소에 이벤트를 등록하는 일반적인 방법은 요소에 addEventListener()를 등록하는 것.
그렇다면 만약 100개의 요소에 이벤트를 등록하고 싶다면...? 🤔

• 이벤트 흐름을 잘 이용한다면 단 1개의 이벤트 리스너로 수 많은 요소의 이벤트를 처리할 수 있다!

이벤트 흐름

만약 이벤트 리스너가 div요소에 있고, 사용자가 부모 요소 div의 자식인 <button> 태그를 클릭했다면?

브라우저는 이벤트가 발생한 button 태그를 찾기 시작할 것이고, 이벤트 1) 캡처링과 2) 버블링을 통해 button 태그의 부모 요소인 div의 이벤트 리스너를 실행시킬 것이다.

이때 event 객체에는 돔에서 일어나는 이벤트의 정보가 들어가 있음!

event.currentTarget : 이벤트가 등록된 요소를 가르킴

• 이는 이벤트 리스너안의 this가 참조하는 대상과 같음
• 그리고 이벤트가 최초에 발생한 요소는 event.target에 참조됨

  <div>.addEventListener('click', function(event){});

  event.currentTarget() === <div> // 이벤트가 등록된 요소
  event.target() === <button> // 이벤트가 최초에 발생한 요소

코드 예시

  <div class="parent">
        Output
        <button>generate item</button>
        <ul>
            <li>initial item</li>
        </ul>
    </div>

    <script>
        const parentEl = document.querySelector('.parent');
        const ulEl = document.querySelector('ul');

        parentEl.addEventListener('click', (e) => {
            if (e.target.tagName.toLowerCase() === "button") {
                const newEl = document.createElement('li');
                newEl.innerText = "hello world~";
                ulEl.appendChild(newEl);
            }

            if (e.target.tagName.toLowerCase() === "li") {
                console.log('hit!!!' + e.target.innerText);
            }
        });
    </script>

즉, 이벤트를 발생시키고 싶은 요소를 이벤트 리스너가 설치된 부모 요소의 자식으로 배치한다면
그 요소가 몇 개든 상관 없이 이벤트를 등록할 수 있음
또한 요소가 동적으로 생성되어 계속 추가 되어도 같은 기능을 유지함

이렇게 이벤트 흐름을 활용하여 단일 이벤트 리스너가 여러개의 이벤트 대상을 처리할 수 있게 하는 프로그래밍을 이벤트 위임이라고 함!

정리

• 이벤트 흐름 : 특정 이벤트가 발생했을 때, 해당 이벤트가 발생한 요소를 찾는 과정에서 만나는 모든 이벤트 리스너를 실행
• 이벤트 위임 : 이러한 흐름의 특징을 이용하여 단일 이벤트 리스너가 여러 개의 이벤트 대상을 처리할 수 있게 만드는 프로그래밍 방법