언어/JavaScript
[이벤트 객체] 클릭 이벤트의 진짜 주인공은 누구인가?
Dachaes
2025. 5. 4. 21:16
728x90
반응형
728x90
event.target과 event.currentTarget
이 글에서는 자바스크립트 이벤트 객체에서 자주 혼동되는 event.target과 event.currentTarget의 차이를 명확히 설명합니다. 이 두 속성은 모두 DOM 이벤트 핸들러 내부에서 사용되며, 비슷해 보이지만 서로 다른 의미를 갖고 있습니다. 특히 버블링(bubbling)과 캡처링(capturing) 같은 이벤트 전파 단계에서 두 속성이 어떻게 다르게 동작하는지를 이해하는 것은 복잡한 UI 컴포넌트를 다룰 때 큰 도움이 됩니다.
1. event.target과 event.currentTarget이란?
a. event.target
- 이벤트가 실제로 발생한 DOM 요소를 가리킵니다.
- 유저가 실제로 클릭하거나 포커스를 둔 요소입니다.
- 이벤트 위임(delegate)을 사용할 때, 어떤 자식 요소에서 이벤트가 발생했는지를 판단할 때 유용합니다.
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<script>
document.getElementById("menu").addEventListener("click", function (event) {
console.log("event.target:", event.target); // 실제 클릭된 <li>
});
</script>
- 이 경우, <ul> 요소에 클릭 이벤트를 붙였지만, 사용자가 클릭하는 대상은 <li> 요소입니다. event.target은 클릭된 <li> 요소를 가리킵니다.
b. event.currentTarget
- 이벤트 핸들러가 지정된 요소를 가리킵니다.
- 즉, addEventListener()에 넘겨진 그 원래의 타겟 요소입니다.
- 이벤트 버블링이나 위임을 사용할 때 this와 같은 의미로 사용됩니다.
document.getElementById("menu").addEventListener("click", function (event) {
console.log("event.currentTarget:", event.currentTarget); // 항상 <ul>
});
- event.currentTarget은 항상 <ul>을 가리킵니다. 왜냐하면 이벤트 핸들러가 <ul>에 직접 바인딩됐기 때문입니다.
2. 비교 - 언제 어떤 속성을 써야 할까?
구분 | event.target | event.currentTarget |
의미 | 실제 이벤트 발생 대상 | 이벤트 핸들러가 바인딩된 요소 |
용도 | 어떤 요소에서 발생했는지 알고 싶을 때 | 핸들러 바인딩된 요소에 접근할 때 |
이벤트 위임에서 | 클릭된 자식 요소 식별 | 부모 요소 기준 작업 수행 |
변경 가능성 | 이벤트 위임된 자식마다 달라짐 | 항상 동일 (핸들러 기준) |
3. 실무에서 유용한 패턴 - 이벤트 위임 활용
이벤트 위임(delegate)은 이벤트를 여러 요소에 바인딩하는 대신, 상위 요소에 한 번만 바인딩하고 내부에서 event.target을 사용하여 처리하는 방식입니다.
<ul id="list">
<li data-id="1">Item 1</li>
<li data-id="2">Item 2</li>
<li data-id="3">Item 3</li>
</ul>
document.getElementById("list").addEventListener("click", function (event) {
if (event.target.tagName === "LI") {
console.log("클릭된 아이템 ID:", event.target.dataset.id);
console.log("이벤트 핸들러는 여기 바인딩됨:", event.currentTarget.id); // 항상 list
}
});
왜 이 방식이 좋은가?
- 동적으로 생성되는 요소에도 대응 가능
- 성능 효율성 (핸들러 1개로 여러 요소 관리)
4. 한 단계 더 - 중첩 이벤트에서의 차이
<div id="outer">
<button id="inner">Click Me</button>
</div>
document.getElementById("outer").addEventListener("click", function (e) {
console.log("target:", e.target.id);
console.log("currentTarget:", e.currentTarget.id);
});
#inner 버튼을 클릭하면
- event.target.id → "inner"
- event.currentTarget.id → "outer"
즉, 이벤트가 #inner에서 발생했지만 #outer에 바인딩된 핸들러가 실행되기 때문에 두 속성이 다르게 나타납니다.
5. 마무리
- event.target은 "누가 이벤트를 일으켰는가?"에 대한 답입니다.
- event.currentTarget은 "누가 이벤트를 처리하고 있는가?"에 대한 답입니다.
- UI 컴포넌트 또는 이벤트 위임 처리 시, target은 조건 분기, currentTarget은 상태 제어에 많이 사용됩니다.
- 둘 다 정확히 이해하면, 복잡한 DOM 구조에서도 이벤트 흐름을 명확히 파악할 수 있습니다.
함께 하면 좋은 자료
외부 사이트 :
반응형
728x90
반응형