[이벤트 객체] 클릭 이벤트의 진짜 주인공은 누구인가?

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 구조에서도 이벤트 흐름을 명확히 파악할 수 있습니다.

함께 하면 좋은 자료

외부 사이트 :

• MDN Web Docs - Event: target property
• MDN Web Docs - Event: currentTarget property

 

---

반응형