[TypeScript에서 DOM 다루기] - event.target 과event.currentTarget

event.target과 event.currentTarget은 둘 다 이벤트 핸들러 내에서 사용되는 속성으로, 이벤트가 발생한 요소에 대한 정보를 제공합니다. 하지만 이 둘의 차이점이 있습니다.

• event.target은 이벤트가 발생한 실제 요소를 나타내는 반면,
• event.currentTarget은 현재 이벤트 핸들러가 바인딩된 요소를 나타냅니다.

<form id="form">
	FORM
		<div>
			DIV
			<p>P</p>
		</div>
</form>

form.onclick = function (event) {
     console.log(`event.target ${event.target.tagName}`);
     console.log(`event.currentTarget ${event.currentTarget.tagName}`);
};

form 를 클릭할 경우

• event.target 은 form을
• event.currentTarget은 form을 출력합니다

div 를 클릭하게 되면

• event.target 은 div를
• event.currentTarget은 form을 출력합니다

이처럼, form태그에 이벤트를 할당했으므로

event.currentTarget은 이벤트가 할당된 form태그만 출력하는 것이고

e.target은 실제 이벤트가 발생한 곳을 출력하는 것입니다

또한 , event.target 은 버블링의 영향을 받지 않습니다

<form id="form">
	FORM
		<div>
			DIV
			<p>P</p>
		</div>
</form>

<form id="form">
	FORM
		<div>
			DIV
			<p>P</p>
		</div>
</form>

form.onclick = function (event) {
		event.target.style.backgroundColor = 'yellow';
};

위의 경우에서 , div를 클릭하면 div부분만 노란색으로 변하게 됩니다

버블링이 만약에 일어났다면 div가 변하고 , form부분도 노란색으로 변해야 하지만 event.target은 버블링의 영향을 받지 않기 때문에 div만 변하는 것입니다

이러한 e.target의 특성과 이벤트 위임을 통해 요소마다 핸들러를 할당하지 않고,
요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있습니다.
이벤트 위임