TIL70. target vs currentTarget

event의 객체 target과 currentTarget을 비교해보자.

이벤트 버블링

둘의 차이를 알기 위해서는 이벤트 버블링이라는 개념에 대해 알아야 한다.
이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다.

• 모든 이벤트가 버블링이 일어나지 않는다. focus 이벤트는 버블링되지 않는다.

target vs currentTarget

<div class="container">
  <button>Click me</button>
</div>

const div = document.querySelector(".container");
div.addEventListener("click", (e) => {
  console.log("target", e.target);
  console.log("currentTarget", e.currentTarget);
});

• button을 클릭해보면 div에 이벤트를 걸었음에도 불구하고 클릭한 요소가 감지되는 것을 확인할 수 있다. target은 이벤트를 발생시킨 루트 요소이다.
• currentTarget은 button을 클릭한 것과 상관없이 div만 감지한다. 즉, 이벤트에 바인딩된 요소만 가리킨다.

발생할 수 있는 문제

예시를 통해 target을 사용할 때 발생할 수 있는 문제점을 살펴보자.

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      val: this.props.val
    };
  }

  handleClick(e) {
    this.setState({ val: e.target.value });
    console.log(this.state.val);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this)} value={this.state.val}>
          <span>나는 span이댜.</span>
        </button>
      </div>
    );
  }
}

버튼을 클릭하면 타겟값이 어쩔 때는 로그에 제대로 찍히고, 어쩔 때는 undefined가 나오는 문제가 발생한다.
왜냐하면 button요소 안에 있는 span요소를 클릭한 경우가 있기 때문이다. span요소를 클릭한 경우에는 button요소에 바인딩되지 않는다.

=> target은 어떤 요소를 클릭했냐에 따라 나타나는 것이 달라진다.(이벤트를 발생시킨 루트 요소)
currentTarget은 절대 변하지 않고, 실제 이벤트가 바인딩된 요소를 나타낸다.(이벤트를 다루는 요소)