Event: target property

이벤트 인터페이스의 읽기 전용 대상 프로퍼티는 이벤트가 디스패치된 객체에 대한 참조이다. 이벤트의 버블링 또는 캡쳐링 단계에서 이벤트 핸들러가 호출될 때는 Event.currentTarget과 다르다.

값 Value

연관된 이벤트타겟

예시

이벤트 위임을 구현하기 위해 event.target 프로퍼티를 사용할 수 있다

Event: currentTarget property

이벤트 인터페이스의 currentTarget 읽기 전용 프로퍼티는 이벤트 핸들러가 연결된 요소를 식별한다.

currentTarget은 이벤트가 발생한 요소와 항상 동일하지는 않다. 왜냐하면 이벤트 핸들러가 있는 요소의 하위 요소에서 발생한 후 핸들러가 있는 요소로 버블업되었을 수 있기 때문이다. 이벤트가 실행된 요소는 Event.target에 의해 지정된다.

currentTarget 의 값은 이벤트 핸들러에서만 사용할 수 있다. 이벤트 핸들러 외부에서는 null이 된다. 예를 들어 이벤트 핸들러 내부에서 Event 객체에 대한 참조를 가져온 다음 이벤트 핸들러 외부에서 currentTarget 속성에 액세스하면 해당 값은 null이 된다.

값 Value

현재 이벤트 핸들러가 연결된 객체를 나타내는 이벤트 타겟

예시

currentTarget vs. target

HTML

부모 div와 자식 div가 있다

<div id="parent">
  Click parent
  <div id="child">Click child</div>
</div>

<button id="reset">Reset</button>
<pre id="output"></pre>

JavaScript

이벤트 핸들러는 부모에 연결되어 있다.

const output = document.querySelector("#output");
const parent = document.querySelector("#parent");
parent.addEventListener("click", (event) => {
  const currentTarget = event.currentTarget.getAttribute("id");
  const target = event.target.getAttribute("id");
  output.textContent = `Current target: ${currentTarget}\n`;
  output.textContent += `Target: ${target}`;
});

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());

결과

자식 div를 클릭하면 target은 자식요소를 식별한다. 부모 div를 클릭하면 target은 부모 요소를 식별한다.

currentTarget은 이벤트 핸들러가 연결되어 있기 때문에 모두 부모 요소로 식별한다.

결론

event.target은 실제 이벤트가 발생한(시작된) 요소이고, event.currentTarget은 이벤트를 듣고 있는(이벤트를 감지하고 그에 반응하는, 처리하는) 요소라고 생각하면 된다.

const onClickSpan = (event) => {
	console.log(event.target) // span
	console.log(event.currentTarget) // button
}

const onClickButton = (event) => {
	console.log(event.target) // button
	console.log(event.currentTarget) // button
}

<button onClick={onClickSpan}>
	<span>click</span>
</button>

<button onClick={onClickButton}>click</button>

버튼 안에 span이 들어있고, 화면에 표시되는 ‘click’ 텍스트는 span 안에 있다. 사용자가 ‘click’ 텍스트를 클릭하면, 그 텍스트는 span 태그 내부에 있기 때문에 가장 먼저 클릭 이벤트가 span 요소에서 발생하게 된다.

따라서 target은 span이 되고 currentTarget은 이벤트 핸들러가 연결되어 있는 button이 된다.

아래 버튼에는 button안에 다른 요소 없이 click 텍스트가 들어있는데, 처음 이벤트가 시작된 요소와 이벤트 핸들러가 연결된 요소가 같기 때문에 target과 currentTarget 모두 버튼이다.

확장

const handleClick = (event) => {
  // span에는 focus가 적용되지 않음 (tabindex가 없으면)
  event.target.focus(); // span에는 효과 없음
  
  // button은 포커스 가능한 요소라서 focus 적용됨
  event.currentTarget.focus(); // button에 포커스 적용됨
}

<button onClick={handleClick}>
  <span>클릭</span>
</button>

event.target.focus()는 span에 기본적으로 포커스할 수 없기 때문에 효과가 없다

event.currentTarget.focus()는 button에 포커스할 수 있기 때문에 효과가 있다