이벤트 위임(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
한약은 거들뿐