이벤트 위임

Gisele·2021년 1월 25일
0

Javascript

목록 보기
2/14

이벤트 위임(event delegation)이란?

  • 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용됨
  • 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다
  • 공통 조상에 할당한 핸들러에서 event.target을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있다
  • 장점
    - 메모리를 아껴요
    • 동적으로 element를 생성할 때도 이벤트를 걸 수 있어요

예시

<div class="wrap">
        <div class="menu">
            <button class="menu-btn">
                <img class="icon" src="./images/yl1.png" alt><br>
                <span class="btn-label">양락이1</span>
            </button>
            <button class="menu-btn">
                <img class="icon" src="./images/yl2.png" alt><br>
                <span class="btn-label">양락이2</span>
            </button>
            <button class="menu-btn">
                <img class="icon" src="./images/yl3.png" alt><br>
                <span class="btn-label">양락이3</span>
            </button>
        </div>
    </div>

각 요소마다 addEventListener를 붙이면 메모리 낭비

const clickBtnHandler = (e)=>{            
       console.log('e.target', e.target)
}

const btns = document.querySelectorAll('.menu-btn')

btns[0].addEventListener('click',clickBtnHandler)
btns[1].addEventListener('click',clickBtnHandler)
btns[2].addEventListener('click',clickBtnHandler) 

이게 바로 이벤트 위임

그래서 공통 부모인 menu에 이벤트를 거는 것이 이벤트 위임!
클릭 이벤트가 발생한 객체는 e.target으로 확인할 수 있다

const clickBtnHandler = (e)=>{            
	console.log('e.target', e.target)
}

const menu = document.querySelector('.menu')

menu.addEventListener('click',clickBtnHandler)

하지만, e.target은 .menu-btn만이 아니라 모든 하위 element를 표시한다는 함정이 있음. 이럴때는 handler 함수 안에서 분기처리를 해줘야할듯

📑 reference

profile
한약은 거들뿐

0개의 댓글