current target과 target의 차이점

currentTarget과 target은 JavaScript 이벤트 객체에서 자주 사용되는 속성으로, 이벤트가 발생한 요소와 이벤트 리스너가 부착된 요소를 구분하는 데 사용됩니다. 이 두 속성의 차이점을 이해하는 것은 이벤트 핸들링을 올바르게 구현하는 데 중요합니다.

 

 

target

 

 

 

• 정의: 이벤트가 발생한 실제 요소를 가리킵니다.

 

 

 

 

• 특징: 이벤트가 발생한 시점의 요소를 참조합니다.

 

 

 

 

• 사용 예시: 사용자가 클릭한 버튼, 입력한 텍스트 필드 등.

 

 

 

 

• 예제:
   

   

   

   

   

    document.getElementById('myButton').addEventListener('click', (event) => {

      console.log(event.target); // 클릭된 실제 버튼 요소

    });

   

   

   

   

 

 

 

currentTarget

 

 

 

• 정의: 이벤트 리스너가 부착된 요소를 가리킵니다.

 

 

 

 

• 특징: 이벤트가 현재 처리되고 있는 요소를 참조합니다.

 

 

 

 

• 사용 예시: 이벤트 위임을 사용할 때 유용합니다.

 

 

 

 

• 예제:
   

   

   

   

   

    document.getElementById('myButton').addEventListener('click', (event) => {

      console.log(event.currentTarget); // 이벤트 리스너가 부착된 버튼 요소

    });

   

   

   

   

 

 

 

차이점 요약

 

 

 

• target: 이벤트가 발생한 실제 요소.

 

 

 

 

• currentTarget: 이벤트 리스너가 부착된 요소.

 

 

 

실용적인 예제

 

 

아래 예제는 이벤트 위임을 사용하여 여러 버튼에 대한 클릭 이벤트를 처리하는 방법을 보여줍니다.

 

 

 

 

 

 

<div id="buttonContainer">

  <button class="btn">Button 1</button>

  <button class="btn">Button 2</button>

  <button class="btn">Button 3</button>

</div>

 

<script>

  document.getElementById('buttonContainer').addEventListener('click', (event) => {

    if (event.target.classList.contains('btn')) {

      console.log('Clicked button:', event.target.textContent); // 클릭된 버튼

      console.log('Event listener attached to:', event.currentTarget.id); // 이벤트 리스너가 부착된 요소

    }

  });

</script>

 

 

 

 

 

 

이 예제에서:

 

 

 

• event.target은 클릭된 실제 버튼 요소를 가리킵니다.

 

 

 

 

• event.currentTarget은 이벤트 리스너가 부착된 div#buttonContainer 요소를 가리킵니다.