이벤트 위임

Loading...March 13, 2022

Prologue

Facebook, Instagram 등 각종 SNS를 보면 무한 스크롤링으로 수많은 컨텐츠를 볼 수 있다.
해당 컨텐츠에는 좋아요, 공유하기, 컨텐츠 자세히 보기 등등 여러 버튼들이 있다.
이 버튼들을에 대해 어떻게 하면 효율적으로 이벤트를 잡을지 간단한 예제를 통해 알아보자

Demo

image

Code Sample

<div class='post_wrap'>
    <div class='post'>
        <button class='post_btn'>
            <div><img src='https://cdn-icons-png.flaticon.com/512/126/126473.png'/></div>
            <div>좋아요</div>
        </button>

        <button class='post_btn'>
            <div><img src='https://cdn-icons-png.flaticon.com/512/126/126504.png'/></div>
                <div>싫어요</div>
        </button>
    </div>
</div>
const ele = document.querySelector('.post_wrap');
ele.addEventListener('click', function (e) {
    let ele = e.target;
    while(!ele.classList.contains('post_btn')) {
        ele = ele.parentNode
        if (ele.nodeName === 'BODY') {
            ele = undefined
            return
        }
    }
    console.log('ele', ele)
})

Code 설명

각각의 버튼에 이벤트를 추가하지 않고, N개 post의 부모 요소에 이벤트 리스너를 추가한다.
이벤트 객체안에서 target을 이용하면, 버튼 요소를 찾을 수 있다.
하지만, 버튼 안에 이미지와 문구를 클릭하면, target이 이미지와 문구를 바라보고 있다.
그러기 때문에 while loop 돌려 부모 요소가 버튼인지 판단한다.
부모 요소에 버튼이 없으면, document 까지 올라가기 때문에 스크립트 에러가 발생한다.
그래서 부모 요소가 body 일때까지만 루프를 실행한다.