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

function clickBtnHandler(){
    console.log(this)
}

for(let i = 0; i < btns.length; i++){
    btns[i].addEventListener('click', clickBtnHandler);
}

// 사실상 아래와 같음
btns[0].addEventListener('click', clickBtnHandler);
btns[1].addEventListener('click', clickBtnHandler);
btns[2].addEventListener('click', clickBtnHandler);

addEvenetListener을 많이 사용하면, 메모리 점유를 해서 성능이 안 좋아진다는 단점

해결방안 : 부모에게 이벤트 위임

---

this === e.currentTarget

---

클릭 이벤트 막기

방식 1. CSS로 pointer-events: none

포인터 적용안되게 막기

.btn-label {
	text-shadow: rgba(255, 255, 255, 1) 0 1px 0;
	pointer-events: none;
}
.icon {
	width: 60px;
	pointer-events: none;
}

주의점 : pointer를 none으로 넣으면, 하위 elm 클릭 인지 불가. 그때는 아래 스크립트 방식으로 처리해야함

dataset

방식 2. 부모 node 타고 올라가기

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

function clickHandler(e) {
    let elm = e.target;
    while (!elm.classList.contains('menu-btn')) {
        elm = elm.parentNode;

        if (elm.nodeName === 'BODY') {
            elm = null;
            return;
        }
    }

    console.log(elm.dataset.value);
}

menu.addEventListener('click', clickHandler);

방식 3. closest()

IE 11은 지원 안함. 그지만 IE는 이제 빠이

closest()

= 메소드 이름 그대로 .elm1에 해당하는 가장 가까운 e.target 객체의 부모를 잡아냄

<div class="elm1" data-id="about">
    <div class="elm2">
        <div class="elm3">elm3</div>
    </div>
</div>

<script>
    const elm1 = document.querySelector('.elm1');
    elm1.addEventListener('click', (e) => {
        console.log(e.target.dataset.id);
    });
</script>

해결방안 1. pointer-events

.elm2 {
    pointer-events: none;
}

해결방안 2. closest()

<script>
    const elm1 = document.querySelector('.elm1');
    elm1.addEventListener('click', (e) => {
        // console.log(e.target.dataset.id);
        console.log(e.target.closest('.elm1'));
    });
</script>