HTML의 currentTarget 이벤트 속성은 이벤트 리스너가 등록되어 있어 해당 이벤트를 실제로 트리거한 요소를 가져올 때 사용됩니다. 이벤트가 버블링되는 상황에서도 리스너가 연결된 요소를 정확히 참조할 수 있다는 점이 특징입니다.
문법(Syntax)
event.currentTarget
currentTarget과 target의 차이
많은 개발자가 currentTarget과 target을 혼동하는데, 두 속성은 다음과 같은 차이가 있습니다.
- target: 실제로 이벤트가 발생한 요소를 반환합니다.
- currentTarget: 이벤트 리스너가 부착된 요소, 즉 현재 처리 중인 요소를 반환합니다.
이벤트 버블링이 발생하면 target은 변하지 않지만, currentTarget은 버블링 단계에 따라 달라집니다.
예제 코드
다음은 currentTarget 이벤트 속성을 구현한 예제입니다. 문단을 클릭하면 이벤트를 트리거한 요소의 이름을 보여주는 알림 창이 나타납니다.
<!DOCTYPE html>
<html>
<body>
<h2>요소 가져오기</h2>
<p onclick="myFunction(event)">이 문장을 클릭하면 이벤트 리스너가 트리거한 요소를 표시하는 알림 창이 나타납니다.</p>
<script>
function myFunction(event) {
alert("Element = " + event.currentTarget.nodeName);
}
</script>
</body>
</html>실행 결과
아래 스크린샷처럼 해당 문장을 클릭해 보세요.
클릭하면 다음과 같이 이벤트 리스너가 트리거한 요소(여기서는 P 태그)를 표시하는 알림 창이 생성됩니다.
정리
event.currentTarget은 이벤트 위임(event delegation) 패턴을 활용할 때 특히 유용합니다. 부모 요소에 하나의 리스너만 등록해도 어떤 자식 요소에서 이벤트가 발생했는지와 무관하게 항상 리스너가 연결된 요소를 참조할 수 있기 때문입니다. 이벤트 흐름을 다룰 때 target과 함께 정확히 이해하고 사용하면 더 안정적인 이벤트 처리 로직을 작성할 수 있습니다.