JavaScript 이벤트 처리기 함수 - e.currentTarget

JavaScripte e.currentTarget에 대해서

e.currentTarget은 무엇일까?

e.currentTarget은 Javascript의 이벤트 처리기 함수이

며 현재 이벤트가 발생한 요소를 가리킨다.

근데 e.target과 차이점이 있다.

e.target를 사용하면 클릭한 그 요소만을 가져오고 e.currentTarget를 사용하면 클릭한 그 요소의 부모 태그까지 가져온다.

예시)

<div class="parent">
	<span class="click">click</span>
</div>

document.querySelector(".parent").addEventListener('click',function(e){
	console.log(e.target);
	console.log(e.currentTarget);
})

//<span class="click">click</span>

//<div class="parent">
//	<span class="click">click</span>
//</div>

이렇게 e.target는 해당 요소만(click클래스) 가져오지만 e.currentTarget은 그 요소의 부모요소(parent클래스)까지 가져온다.

e.currentTarget 값은 이벤트가 처리되는 동안만 사용할 수 있다.

counter 기능 코딩 연습하는데 참고한 곳에서 코드 작성할 때 e.currentTarget를 사용했는데 신박했다고 느꼈다.(개인적으로)

마이너스 버튼, 초기화 버튼, 플러스 버튼 총 3개의 버튼이 있는데 버튼클래스를 눌렀을 때 *클래스가 포함되어 있다면 이런 동작을 해줘! 였다.

<h1 class="value">0</h1>
<button class="btn mi">-</button>
<button class="btn reset">reset</button>
<button class="btn plus">+</button>

let btns = document.querySelectorAll(".btn");
let num = document.querySelector(".value");
let count = 0;

btns.addEventListener('click',function(e){
	let 이벤트값 = e.currentTarget.classList;
	if(이벤트값.contains('mi')){
		count--;
	}else if(이벤트값.contains('plus')){
		count++;
	}else{
		count = 0;
	}
	value.textContent = count;
});

이렇게 button 태그를 btn 클래스로 묶어서 클릭했을 때 부모요소까지 가져와 내가 원하는 class명이 포함되어있다면 원하는 동작을 할 수 있도록 실행할 수 있었다. 이로써 코드는 깔끔해지고 간단해질 수 있었다.

카운터 만드는 기능은 이곳에서 배웠다. 다른 기능들도 알고 싶으면 이 사이트에 가서 만들어보는 걸 추천한다!