이벤트 위임 (Event Delegation)

yujuck·2020년 9월 8일
0
post-thumbnail

지난번에 알아본 이벤트 버블링과 캡처링은 이벤트 위임을 이해하기 위한 기본 바탕이라고 할 수 있다.

이벤트 버블링, 캡처링

버블링 : 특정 요소에서 발생한 이벤트가 상위 요소로 전달되는 방식
캡처링: 특정 이벤트가 발생했을 때 최상위 요소인 body 태그에서 해당 태그로 전달되는 방식


이벤트 위임

상위 요소에서 하위 요소의 이벤트들을 제어하는 방식

쉽게 얘기하면 하위 요소 여러개가 있을 때 각각에 이벤트를 설정하지 않고 상위 요소에서 해당 요소의 하위에 있는 요소들의 이벤트를 제어하는 방식이다.

<body>
    <div>
        <ul class="ul-tag">
            <li class="one">One</li>
            <li class="two">Two</li>
            <li class="three">Three</li>
        </ul>
    </div>

    <script>
        document.querySelector('.ul-tag').addEventListener('click', event => {
            alert('click class'  + event.target.classList )
        });
    </script>
</body>

이렇게 하면 이벤트리스너를 ul-tag 클래스에만 등록했는데 하위의 li요소를 클릭할 때 이벤트가 발생하는 것을 볼 수 있다.

One 클릭 시

Two 클릭 시

Three 클릭 시

또 다른 li 태그가 생성되더라도 이벤트를 등록하지 않아도 클릭 이벤트를 받을 수 있어서 좋지만 불필요한 이벤트가 발생하는 경우도 생길 수 있기 때문에 잘 선택해서 사용해야 할 것 같다.

0개의 댓글