기본개념_이벤트버블링 과 이벤트 위임🫧

jjyu_my·2025년 2월 14일
0

JAVASCRIPT

목록 보기
13/14
post-thumbnail

👩🏻‍💻 프로젝트 하면서 자꾸 의도한대로 동작이 되지않길래 찾아보니 이벤트 버블링현상..
간단한걸 까먹고 원인이 뭐지?? 하면서 다른곳에서 찾고있었다....ㅎ 어이없는 실수!!!ㅠㅠㅠ


🎈 이벤트 버블링

이벤트는 자식에서 발생해서 부모를 거쳐 조상으로 전파

.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()로 자식 확인

profile

0개의 댓글

관련 채용 정보