이벤트가 발생한 대상의 데이터 값 가져오기 - event.target

자바스크립트는 event.target 속성을 통해 이벤트가 발생한 대상(요소)의 데이터 값을 가져올 수 있다.

 

Event.target (=e.target)

예를 들어, 아래와 같은 코드가 있다고 예를 들어보자

$("a").click(function(e){
   console.log(e.target);
});

실행시키면 콘솔창에 a 요소가 출력될 것이다. 즉, 위의 코드를 해석하자면 a요소 클릭 시 이벤트가 발생하며, 그 이벤트가 발생할 때마다 e.target 속성 때문에 이벤트의 대상인 a 요소가 출력된다.

 

만약, 데이터 속성 값(data-)을 지정한 요소의 이벤트 값은 어떻게 불러올까?

<a data-id=1 onClick={function(e){
    e.target.dataset.id
}.bind(this)}></a>

e.target을 통해 현재 이벤트가 일어난 요소를 가져오고, 그 요소의 data-id로 저장한 데이터 값은 data 속성에 접근하는 속성인 dataset과 data- 뒤에 지정한 이름을 매치시키면 불러올 수 있다.