event.target
을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있다<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>
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