Frontend/JavaScript

[JavaScript] e.target 속성들 [6/1 study]

동혁이 2024. 6. 1. 15:22

 

 

e.target 속성들

 

 

 

 

❗️e.target은 이벤트가 발생한 요소를 나타내는 객체다!

이벤트의 종류에 따라 e.target 객체의 속성은 다를 수 있지만, 일반적으로 다음과 같은 속성들이 포함될 수 있습니다:

  1. nodeName: 요소의 태그 이름을 나타냅니다.
  2. nodeType: 요소의 노드 유형을 나타냅니다.
  3. tagName: 요소의 태그 이름을 나타냅니다.
  4. value: 입력 요소에서 사용자가 입력한 값(텍스트, 체크 상태, 선택된 옵션 등)을 나타냅니다.
  5. name: 입력 요소의 이름을 나타냅니다.
  6. type: 입력 요소의 타입을 나타냅니다.
  7. checked: 체크 박스나 라디오 버튼의 체크 상태를 나타냅니다.
  8. selected: 선택된 옵션 요소인지 여부를 나타냅니다(선택 상태인 경우 true).
  9. id: 요소의 고유 식별자인 ID를 나타냅니다.
  10. classList: 요소의 클래스 목록을 나타내는 DOMTokenList 객체입니다.
  11. parentNode: 요소의 부모 노드를 나타내는 객체입니다.
  12. childNodes: 요소의 자식 노드 목록을 나타내는 NodeList 객체입니다.
  13. attributes: 요소의 속성을 나타내는 NamedNodeMap 객체입니다.
  14. textContent: 요소의 텍스트 내용을 나타냅니다.
  15. dataset: 요소의 데이터 속성을 나타내는 객체입니다.

이 외에도 특정 이벤트나 요소의 종류에 따라 다양한 속성이 추가될 수 있습니다!

 

🔥마무리

이벤트 핸들러를 작성할 때, e.target을 적절히 활용하여 필요한 속성을 가져와서 사용해야 겠다!