JavaScript event.target 사용법 정리 (클릭한 요소 찾기)

event.target이란 무엇인가?

event.target은 이벤트가 실제로 발생한 요소를 의미합니다.

예를 들어 <ul> 안에 여러 개의 <li>가 있을 때 <li>를 클릭하면 이벤트는 상위 요소인 <ul>까지 전달됩니다(이벤트 버블링).

이때 event.target은 실제 클릭된 <li>를 가리키고, event.currentTarget은 이벤트가 등록된 <ul>을 가리킵니다.

이 차이를 이해하면 이벤트 위임(Event Delegation)을 훨씬 쉽게 구현할 수 있습니다.

왜 event.target을 알아야 하는가?

JavaScript에서 이벤트를 처리할 때 모든 요소에 개별 이벤트를 등록하면 성능이 떨어질 수 있습니다.

예를 들어 게시판 목록이 1,000개라면 1,000개의 이벤트를 등록해야 합니다.

하지만 부모 요소에 이벤트를 한 번만 등록하고 event.target을 사용하면 실제 클릭된 요소를 확인할 수 있습니다.

장점은 다음과 같습니다.

• 이벤트 등록 수 감소
• 동적으로 생성된 요소도 처리 가능
• 유지보수 편리
• 성능 향상

기본 사용 예제

아래 예제는 클릭한 <li>를 숨기는 코드입니다.

// Make a list
const ul = document.createElement('ul');
document.body.appendChild(ul);

const li1 = document.createElement('li');
const li2 = document.createElement('li');

ul.appendChild(li1);
ul.appendChild(li2);

function hide(evt) {
	evt.target.style.visibility = 'hidden';
}

ul.addEventListener('click', hide, false);

동작 원리는 간단합니다.

1. ul에 클릭 이벤트 등록
2. li 클릭
3. 이벤트가 ul까지 전달
4. event.target이 클릭된 li 반환
5. 해당 li 숨김 처리

이것이 바로 이벤트 위임의 기본 형태입니다.

드롭다운 메뉴 닫기 구현

실무에서는 특정 영역 외부를 클릭했을 때 메뉴를 닫아야 하는 경우가 많습니다.

예를 들어 모바일 메뉴, 셀렉트 박스, 드롭다운 UI 등이 있습니다.

아래 코드는 메뉴 영역 밖을 클릭했을 때 slideUp()을 실행하는 예제입니다.

$(document).on("focusin click", function(event) {

	var target_out = false;

	if($(event.target).is(".foot_menu2 button")) target_out = true;
	if($(event.target).is(".foot_menu2 ul.list")) target_out = true;
	if($(event.target).is(".foot_menu2 ul.list li")) target_out = true;
	if($(event.target).is(".foot_menu2 ul.list li a")) target_out = true;

	if(target_out === false) {
		slideUp();
	}

});

코드 흐름은 다음과 같습니다.

• 버튼 클릭 → 유지
• 메뉴 클릭 → 유지
• 메뉴 내부 링크 클릭 → 유지
• 그 외 영역 클릭 → 메뉴 닫기

실제 개발 중 겪었던 문제

예전에 셀렉트 박스를 직접 구현하면서 비슷한 문제를 경험한 적이 있습니다.

메뉴를 열고 항목을 선택하면 정상적으로 동작했지만, 메뉴 외부를 클릭했을 때 닫히지 않는 문제가 발생했습니다.

원인을 확인해 보니 클릭 위치를 제대로 판별하지 못하고 있었습니다.

처음에는 여러 개의 클릭 이벤트를 등록했지만 관리가 어려웠고, 최종적으로 document에 이벤트를 하나만 등록한 뒤 event.target으로 클릭 위치를 판단하도록 수정했습니다.

수정 후에는 동적으로 생성되는 메뉴까지 정상적으로 처리할 수 있었고 코드도 훨씬 단순해졌습니다.

더 간단하게 작성하는 방법

jQuery의 closest()를 사용하면 코드를 더 짧게 만들 수 있습니다.

$(document).on("focusin click", function(event) {

	if($(event.target).closest(".foot_menu2").length === 0) {
		slideUp();
	}

});

이 방법은 클릭한 요소가 .foot_menu2 내부에 있는지 자동으로 확인합니다.

실무에서는 보통 이 방식을 더 많이 사용합니다.

장점은 다음과 같습니다.

• 코드가 짧음
• 유지보수 편리
• 하위 요소 추가 시 수정 불필요

event.target 사용 시 주의사항

event.target을 사용할 때는 다음 사항을 기억하면 좋습니다.

1. 실제 클릭된 요소를 반환

<button>
	<span>버튼</span>
</button>

위 구조에서 span을 클릭하면 event.target은 button이 아니라 span이 됩니다.

2. currentTarget과 다름

console.log(event.target);
console.log(event.currentTarget);

• target : 실제 클릭 요소
• currentTarget : 이벤트 등록 요소

3. 이벤트 버블링 이해 필요

부모 요소까지 이벤트가 전달되므로 예상하지 못한 동작이 발생할 수 있습니다.

필요하면 event.stopPropagation()을 사용합니다.

마무리

event.target은 JavaScript 이벤트 처리에서 가장 많이 사용되는 속성 중 하나입니다.

특히 드롭다운 메뉴, 팝업, 모달창, 탭 메뉴, 동적 리스트 등을 구현할 때 매우 유용합니다.

개별 요소마다 이벤트를 등록하기보다는 부모 요소에 이벤트를 등록하고 event.target으로 실제 클릭된 요소를 확인하는 방식이 성능과 유지보수 측면에서 훨씬 효율적입니다.

실무에서도 “메뉴 외부 클릭 시 닫기” 기능을 구현할 때 자주 사용되므로 반드시 익혀두는 것이 좋습니다.