e.target과 e.currentTarget의 차이

target과 currentTarget의 차이

바인딩된 요소의 값을 가져오는 것과

이벤트가 발생한 요소의 값을 가져오는것의 차이점은 서로 다른 값을 가져옵니다.

이벤트가 발생한 요소의 값을 가져오는 것은 event.target을 통해 해당 요소의 값을 가져올 수 있습니다.

이 값은 실제 이벤트를 발생시킨 요소의 값을 가져오며, 이벤트가 발생한 위치와 일치합니다.

반면에, 바인딩된 요소의 값을 가져오는 것은 event.currentTarget을 통해 해당 요소의 값을 가져올 수 있습니다.

이 값은 이벤트 핸들러가 바인딩된 요소의 값을 가져오며, 이벤트가 발생한 위치와 무관합니다.

즉, 이벤트가 발생한 요소의 값을 가져오면 해당 요소의 상태에 대한 정보를 얻을 수 있고,

바인딩된 요소의 값을 가져오면 이벤트 핸들러가 등록된 요소의 상태에 대한 정보를 얻을 수 있습니다.

이 둘은 서로 다른 값이므로, 상황에 따라 적절한 값을 가져와야 합니다.

<button id="myButton">클릭하세요!</button>
const button = document.querySelector('#myButton');

button.addEventListener('click', function(event) {
  console.log(event.target.value);       // undefined
  console.log(event.currentTarget.value);  // "클릭하세요!"
});

위 코드에서 event.target은 button 요소를 가리키고 있으며, value 속성이 존재하지 않기 때문에 undefined를 출력합니다.

반면에, event.currentTarget은 이벤트 핸들러가 등록된 button 요소를 가리키고 있으며, value 속성이 존재하기 때문에 "클릭하세요!"라는 값을 출력합니다.

예를 들어, input 요소가 다른 요소의 자식 요소로 포함된 경우에는

event.currentTarget과 event.target의 값이 다를 수 있습니다.

이 경우 event.currentTarget은 이벤트 핸들러가 등록된 요소를,

event.target은 실제 이벤트를 발생시킨 input 요소의 부모 요소를 가리키게 됩니다.

<div>
  <label for="myInput">Input:</label>
  <input type="text" id="myInput">
</div>


const input = document.querySelector('#myInput');

input.addEventListener('change', function(event) {
  console.log(event.currentTarget.tagName);  // "INPUT"
  console.log(event.target.tagName);         // "INPUT"
});

위 코드에서는 input 요소의 부모 요소인 div 요소에서 label 요소를 클릭하면

event.currentTarget은 input 요소를, event.target은 label 요소를 가리키게 됩니다.

하지만 input 요소에서 값이 변경될 때에는 event.currentTarget과 event.target이 모두 input 요소를 가리키게 됩니다.