[JavaScript] e.target , e.currentTarget

e.target , e.curentTarget 차이점

결론부터 말하자면,
e.target :: 실제 이벤트가 발생하는 요소 (나만 이벤트 발생)
e.currentTarget :: 이벤트 리스너가 달린 요소 (자식 클릭해도 부모도 이벤트 위임)

<div id="outer">outer
	<div id="inner">inner
		<button type="button" id="button">button</button>
	</div>
</div>

const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const button = document.getElementById('button');

function printLog(e) {
	const { target, e.currentTarget } = e;
	console.log(`target: ${target.id}, currentTarget: ${currentTarget.id}`);
}
outer.addEventListener('click', printLog);
// target: outer, currentTarget: outer
inner.addEventListener('click', printLog);
// target: inner, currentTarget: inner, outer
button.addEventListener('click', printLog);
// target: button currentTarget: button, inner, outer

이벤트 버블링 막기

function printLog(e) {
	const {target, currentTarget} = e;
	// 클릭된 대상이 자기 자신일 때만 로직이 동작하도록 처리한다.
	if(target !== e.currentTarget) return;
	console.log(`target: ${target.id}, currentTarget: ${currentTarget.id}`);
}

이벤트위임 활용하기

[예제] 토글스크립트 간단하게 만들기

<ul class="list">
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
</ul>

const ul = document.getElementByClassName('list')[0];
function toggleLineThrough(e) {
	e.target.style.textDecoration = !e.target.style.textDecoration ? 'line-through' : '';
}
ul.addEventListener('click', toggleLineThrough);

Reference

https://db2dev.tistory.com/entry/JS-%EC%9D%B4%EB%B2%A4%ED%8A%B8%EC%9D%98-target%EA%B3%BC-currentTarget-%EC%B0%A8%EC%9D%B4-with-%EB%B2%84%EB%B8%94%EB%A7%81