🖋️ SyntheticEvent 의 이벤트 속성

# target 과 currentTarget 비교

DOM 이벤트의 컨텍스트에서 target 과 currentTarget는
이벤트와 관련된 다른 요소를 참조하는 이벤트 객체의 속성

• target

  • 이벤트를 트리거한 요소
  • 이벤트 버블링에 관계없이 이벤트가 원래 발생한 요소
    
    
  • 사용법
    • 어떤 요소와 상호 작용했는지 구체적으로 알아야 할 때 사용
    • 여러 자식 요소가 부모 요소에서 동일한 이벤트를 트리거할 수 있는
      위임된 이벤트 처리기가 있는 시나리오에서 특히 유용

<ul onClick={(event) => console.log(event.target)}>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

• currentTarget

  • 이벤트 처리기가 연결된 요소
  • 즉, DOM 트리에서 버블링되거나 캡처될 때 현재 이벤트를 처리하고 있는 요소
    
    
  • 사용법
    • 이벤트 리스너가 연결된 요소를 참조해야 할 때 사용
    • 동일한 처리기 함수가 여러 요소에 사용되거나
      이벤트 위임을 사용하는 경우에 특히 유용

<ul onClick={(event) => console.log(event.currentTarget)}>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

• 각각 사용 시기와 방법

* "target"
  어떤 요소가 상호 작용했는지 정확히 알아야 하는 경우 사용
  동적으로 생성된 항목 목록에 대한 클릭 처리와 같은 Event Deligation 패턴
  
* "currentTarget" 
  실제로 이벤트 리스너를 연결한 요소 참조
  동일한 처리기가 여러 요소에서 사용되거나 
  처리기가 컴포넌트의 루트 요소에 
  연결된 컴포넌트에서 사용되는 경우 

# preventDefault() 과 stopPropagation() 알아보기

이벤트 객체에 사용 가능한 메서드이며 이벤트 동작 제어하는데 사용

• preventDefault()

  • 링크가 새 페이지로 이동하지 못하도록 하여 대신 사용자 지정 동작을 허용
  • 이벤트와 연관된 기본 동작이 발생하지 않도록 하는 데 사용
  • 많은 이벤트에는 브라우저에 기본 작업 존재
    
    
  • 사용법
    • 이벤트의 표준 동작을 방지하려는 경우
    • 양식 처리, 링크 탐색 등에 특히 유용

document.getElementById('myForm').addEventListener('submit', (event) => {
   event.preventDefault();
   // custom handling
});

document.querySelector('a').addEventListener('click', (event) => {
   event.preventDefault();
   // custom handling
});

• stopPropagation()

  • DOM 을 통한 이벤트 버블링을 중지하는데 사용
  • DOM 의 이벤트는 대상 요소에서 상위 요소로 버블링
  • 맨 위에서 아래로 캡쳐 가능
  • 이벤트가 체인을 따라서 더 이상 이동 못 하도록 설정
    
    
  • 사용법
    • 이벤트가 부모 요소에 영향을 주지 않도록 하는 경우
    • 자식 요소의 이벤트가 부모 요소의 이벤트 처리기를
      트리거하지 않아야 하는 복잡한 UI에 사용

// 자식 요소를 클릭하면 click 이벤트 리스너가 트리거되지만
// 부모의 click 이벤트 리스너는 트리거되지 않음
document.getElementById('child').addEventListener('click', (event) => {
   event.stopPropagation();
   console.log('Child Clicked');
});

document.getElementById('parent').addEventListener('click', (event) => {
   // 이거는 자식 요소가 클릭할 때 호출되지 않음
   console.log('Parent Clicked');
});

📢 요약

• stopPropagation()
  • 이벤트가 DOM 트리를 버블링하거나 캡처하는 것을 방지
  • 기본적으로 이벤트를 대상 요소로 격리하는데 사용
    
    
• preventDefault()
  • 이벤트와 관련된 기본 동작을 중지
  • 사용자 지정 이벤트 동작을 정의할 수 있도록 하는 데 사용