👩🏻💻 프로젝트 하면서 자꾸 의도한대로 동작이 되지않길래 찾아보니 이벤트 버블링현상..
간단한걸 까먹고 원인이 뭐지?? 하면서 다른곳에서 찾고있었다....ㅎ 어이없는 실수!!!ㅠㅠㅠ
🎈 이벤트 버블링
이벤트는 자식에서 발생해서 부모를 거쳐 조상으로 전파
.child 클릭 → "자식 클릭!" → "부모 클릭!" 출력🚨이벤트 버블링 주의!!!
- 버블링으로 인해 부모나 조상에게까지 이벤트가 전달되기 때문에, 의도한 동작 외에도 다른 동작이 일어나면서 에러가 발생할 수 있다. 이런 문제는 이벤트 위임을 사용하여 해결할 수 있다
🚀 이벤트 위임 (Event Delegation)
부모 요소에 이벤트를 등록하고, 그 이벤트가 실제로 클릭된 자식 요소를 e.target으로 확인
- 동적으로 추가된 요소도 이벤트를 처리할 수 있다
✅ EX)
document.querySelector(".parent").addEventListener("click", function (e) {
if (e.target.matches(".child")) { // 클릭된 요소가 .child인지 확인
console.log("자식 버튼 클릭됨!");
}
});
💡 왜 유용한가?
성능 향상: 부모에 한 번만 이벤트를 등록하면, 여러 자식 요소에 개별적으로 이벤트를 달 필요 없이 효율적으로 처리할 수 있다
동적 요소 처리: 페이지가 동적으로 변경되더라도, 추가된 자식 요소들도 자동으로 이벤트를 처리할수 있다
🎯 this vs e.target vs e.currentTarget
| 개념 | 의미 | 예시 |
|---|---|---|
| this | 이벤트가 걸린 요소 | .parent에 이벤트 걸리면 .parent |
| e.target | 실제 클릭된 요소 | .child를 클릭하면 .child |
| e.currentTarget | 이벤트가 걸린 요소 (this와 동일) | .parent (this랑 같음) |
🔥 정리
이벤트 버블링: 자식 → 부모 → 조상으로 전파됨
this / e.currentTarget: 이벤트가 걸린 부모 요소
e.target: 실제 클릭된 요소
이벤트 위임: 부모에 이벤트 걸고 e.target.matches()로 자식 확인
