-
event.target vs event.currentTarget 차이점 완벽 정리 🚀 헷갈리는 개념 한 방에 해결!Developer 2025. 2. 14. 09:00728x90
1. event.target과 event.currentTarget이란?
자바스크립트에서 이벤트 핸들러를 사용할 때 event.target과 event.currentTarget이 자주 등장합니다.
하지만 둘의 차이를 헷갈리는 경우가 많죠! 🤔
✅ event.target: 이벤트가 발생한 실제 요소(클릭된 요소)
✅ event.currentTarget: 이벤트 핸들러가 등록된 요소(현재 이벤트가 바인딩된 요소)이제 예제를 통해 좀 더 자세히 알아보겠습니다.
2. event.target vs event.currentTarget 예제 🔥
📌 기본적인 HTML & JavaScript 예제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Event Target vs CurrentTarget</title> <style> .container { padding: 20px; background-color: #f0f0f0; border: 2px solid #333; } .button { padding: 10px 20px; background-color: blue; color: white; border: none; cursor: pointer; } </style> </head> <body> <div class="container"> <button class="button">클릭하세요</button> </div> <script> document.querySelector(".container").addEventListener("click", function(event) { console.log("event.target:", event.target); console.log("event.currentTarget:", event.currentTarget); }); </script> </body> </html>✅ 실행 결과
- .button을 클릭하면:
- event.target: <button class="button">클릭하세요</button> event.currentTarget: <div class="container"></div>
- .container를 클릭하면:
- event.target: <div class="container"></div> event.currentTarget: <div class="container"></div>
🚀 핵심 정리
- event.target은 클릭된 요소(실제 이벤트 발생 요소)
- event.currentTarget은 이벤트 리스너가 등록된 요소
3. 이벤트 버블링과 함께 이해하기
event.target과 event.currentTarget의 차이를 완벽히 이해하려면 이벤트 버블링(Event Bubbling) 개념을 알아야 합니다.
✅ 이벤트 버블링이란?
이벤트가 자식 요소에서 부모 요소로 전파되는 현상
📌 이벤트 버블링 예제
<div id="parent"> <button id="child">클릭!</button> </div> <script> document.getElementById("parent").addEventListener("click", function(event) { console.log("event.target:", event.target); console.log("event.currentTarget:", event.currentTarget); }); </script>✅ 결과 (#child 버튼 클릭 시)
event.target: <button id="child">클릭!</button> event.currentTarget: <div id="parent"></div>🚀 결론
- event.target은 이벤트가 발생한 요소(자식 요소)를 가리킴
- event.currentTarget은 이벤트 핸들러가 등록된 요소(부모 요소)를 가리킴
4. event.target vs event.currentTarget 비교 정리 📝
비교 항목 event.target event.currentTarget 의미 이벤트가 발생한 실제 요소 이벤트 핸들러가 등록된 요소 이벤트 버블링 영향을 받음 영향을 받지 않음 일반적인 사용 사례 클릭된 요소 확인, 조건문 활용 부모 요소의 이벤트 제어 ✅ Tip: event.stopPropagation()을 사용하면 이벤트가 부모로 전달되지 않도록 할 수 있습니다.
document.getElementById("child").addEventListener("click", function(event) { event.stopPropagation(); console.log("이벤트 전파 방지! 부모 요소에는 이벤트 전달 안 됨."); });5. 실전 활용 예제 🚀
✅ 1) 특정 버튼만 클릭 이벤트 실행하기
document.querySelector(".container").addEventListener("click", function(event) { if (event.target.classList.contains("button")) { console.log("버튼 클릭 감지!", event.target); } });📌 event.target을 활용하면 클릭된 요소가 .button인지 확인 가능!
✅ 2) 부모 요소에 대한 이벤트만 실행하기
document.querySelector(".container").addEventListener("click", function(event) { console.log("부모 요소 이벤트 실행!", event.currentTarget); });📌 event.currentTarget을 사용하면 부모 요소에서만 이벤트 실행 가능!
6. 결론 🎯
📌 event.target과 event.currentTarget의 차이점을 제대로 이해하면, 이벤트 위임과 버블링을 효과적으로 활용할 수 있습니다!
✅ event.target은 실제 이벤트가 발생한 요소
✅ event.currentTarget은 이벤트가 등록된 요소
✅ 이벤트 버블링을 고려하여 적절히 활용할 것!
👉 이제 event.target과 event.currentTarget을 실무에서 효과적으로 활용해 보세요! 🚀
728x90'Developer' 카테고리의 다른 글
HTML Doctype이란? 🚀 웹페이지의 시작을 여는 필수 요소! (0) 2025.02.19 CDN이란? 🚀 웹 속도를 극대화하는 비밀 병기! (1) 2025.02.17 URI, URL, URN의 차이점 완벽 정리 🚀 개념부터 실전 활용까지! (0) 2025.02.13 HTML 데이터 속성(data-*) 완벽 가이드 🚀 활용법부터 실전 예제까지! (2) 2025.02.12 px, em, rem의 차이점 완벽 정리! 웹 개발에서 꼭 알아야 할 길이 단위 (0) 2025.02.11