Javascript 이벤트 위임(Event Delegation) | protect-me

이벤트 리스너에는 비용이 많이 들어감
이벤트 위임을 통해 비용을 최소화 할 수 있음

1. 요소에 이벤트 추가하기

😅 이벤트 리스너 추가

---

각 버튼에 이벤트 리스너를 추가하여 클릭 시 alert를 띄움 : 비효율 / 고비용

🥲 이벤트 리스너 추가 - 반복문

---

기존의 이벤트 리스너를 반복문으로 처리함 : 고비용

2. 부모에 이벤트 위임하기

😯 이벤트 위임 - CSS(pointer-events)

---

eventListener를 요소가 아닌 부모(menu)에 받고
css에서 event를 받지 않을 요소에 pointer-events: none;를 추가함

🚨 비용면에서는 효율적일 수 있으나,
요소 내부에 다른 요소들에게 click Event를 부여해야할 경우 복잡해질 수 있음.

🤓 이벤트 위임 - event.path

---

btn3 text를 클릭 시 event.path는 아래와 같음
[div, div.menu-btn, div.menu, div.container, body, html, document, Window]

따라서 e.path.find() 함수를 통해서 className 중 menu-btn가 있는지를 확인함
있을 경우 clickBtnHandler를 호출함

3. dataset 추가하기

---

🤔 "버튼마다 다른 이벤트를 발생시키기 위해서 어떻게 해야할까?"

html .menu-btn 내에 dataset attribute를 추가

data-value = "value" 로 지정해놓은 dataset은
target.getAttribute("data-value") 혹은
target.dataset.value로 가져올 수 있음

4. 의문점

---

🤔 "document.querySelector(".menu-btn")로 처리를 하면 되지 않을까?"

.menu-btn 내부의 img나 div 등을 클릭할 시,
className은 .menu-btn이 아니게 됨.

따라서 내부의 모든 요소의 className을
menu-btn로 통일할 것이 아니라면 이 방법은 권장되지 않음.

📚 참고

---

Photo by Keila Hötzel on Unsplash

---

protect-me