JavaScript에서 이벤트 핸들링을 할 때 자주 마주치는 event.target 과 event.currentTarget
얼핏 보면 비슷해 보이지만, 실제로는 매우 다른 동작을 하는 이 두 프로퍼티에 대해 정리해보려한다.
핵심 개념
event.target
이벤트가 실제로 발생한 가장 안쪽의 요소를 가리킨다.
즉, 실제로 클릭되거나 상호작용이 일어난 요소를 말하며, 이벤트 버블링 과정에서 변하지 않고 항상 동일한 요소를 가리킨다.
event.currentTarget
현재 이벤트 핸들러가 동작하고 있는 요소를 가리킨다.
이벤트 리스너가 실제로 등록된 요소를 말하며, 이는 이벤트 버블링 과정에서 변경될 수 있다.
예시 코드
<div id="outer">
<div id="inner">
<button id="button">클릭하세요</button>
</div>
</div>
<script>
document.getElementById('outer').addEventListener('click', function(event) {
console.log('outer');
console.log('target:', event.target.id);
console.log('currentTarget:', event.currentTarget.id);
});
document.getElementById('inner').addEventListener('click', function(event) {
console.log('inner');
console.log('target:', event.target.id);
console.log('currentTarget:', event.currentTarget.id);
});
document.getElementById('button').addEventListener('click', function(event) {
console.log('button');
console.log('target:', event.target.id);
console.log('currentTarget:', event.currentTarget.id);
});
</script>버튼을 클릭하면 콘솔에 아래와 같이 출력된다.
위 출력을 통해 확인할 수 있는 차이점은 다음과 같다.
event.target은 항상 실제 클릭된 버튼을 가리킨다.event.currentTarget은 현재 실행 중인 이벤트 핸들러가 붙어 있는 요소를 가리키므로, 버블링이 진행됨에 따라 outer, inner 등으로 변경된다.
그렇다면 이는 실제로 어떻게 활용하면 좋을까?
활용 방법
1. 이벤트 위임(Event Delegation) 패턴
document.getElementById('outer').addEventListener('click', function(event) {
// event.target으로 실제 클릭된 요소의 타입 확인
if (event.target.tagName === 'BUTTON') {
// 버튼이 클릭된 경우의 처리
console.log('버튼이 클릭되었습니다!');
}
// event.currentTarget은 항상 outer div를 가리킴
console.log('이벤트 위임이 설정된 요소:', event.currentTarget.id);
});2. 동적으로 추가되는 요소 처리
const outer = document.getElementById('outer');
// 동적으로 버튼 추가
const addButton = () => {
const newButton = document.createElement('button');
newButton.textContent = '새 버튼';
outer.appendChild(newButton);
};
// 이벤트 위임을 통한 처리
outer.addEventListener('click', function(event) {
if (event.target.tagName === 'BUTTON') {
console.log('클릭된 버튼:', event.target);
console.log('이벤트 핸들러가 등록된 요소:', event.currentTarget);
}
});주의할 점
1. this와 currentTarget
이벤트 핸들러 내부에서 this 는 event.currentTarget 과 동일하다.
(단, 화살표 함수를 사용할 경우 this 의 바인딩이 달라진다.)
element.addEventListener('click', function(event) {
console.log(this === event.currentTarget); // true
});
element.addEventListener('click', (event) => {
console.log(this === event.currentTarget); // false
});2. 이벤트 버블링 중지
element.addEventListener('click', function(event) {
event.stopPropagation(); // 이벤트 버블링 중지
// 이후의 currentTarget 변경은 발생하지 않음
});마무리
event.target 과 event.currentTarget 의 차이를 이해하는 것은 효과적인 이벤트 핸들링을 위해 매우 중요하다. 특히 이벤트 위임 패턴을 구현할 때 이 두 프로퍼티의 특성을 잘 활용하면 더 효율적인 코드를 만들 수 있을 것이라고 생각한다.
Reference
어제보다 더 나은