![[JavaScript] e.target 속성들 [6/1 study]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FD8j9u%2FbtsHZVWkIMS%2FAAAAAAAAAAAAAAAAAAAAAE0UaD7cJ5oYxDEWiS4SoYzSZNmP64Jb07zPk20_e_Kg%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DCkZPFZ%252FYSBhX9PGKx329GgCbn2Y%253D)
[JavaScript] e.target 속성들 [6/1 study]Frontend/JavaScript2024. 6. 1. 15:22
Table of Contents
e.target 속성들
❗️e.target은 이벤트가 발생한 요소를 나타내는 객체다!
이벤트의 종류에 따라 e.target 객체의 속성은 다를 수 있지만, 일반적으로 다음과 같은 속성들이 포함될 수 있습니다:
- nodeName: 요소의 태그 이름을 나타냅니다.
- nodeType: 요소의 노드 유형을 나타냅니다.
- tagName: 요소의 태그 이름을 나타냅니다.
- value: 입력 요소에서 사용자가 입력한 값(텍스트, 체크 상태, 선택된 옵션 등)을 나타냅니다.
- name: 입력 요소의 이름을 나타냅니다.
- type: 입력 요소의 타입을 나타냅니다.
- checked: 체크 박스나 라디오 버튼의 체크 상태를 나타냅니다.
- selected: 선택된 옵션 요소인지 여부를 나타냅니다(선택 상태인 경우 true).
- id: 요소의 고유 식별자인 ID를 나타냅니다.
- classList: 요소의 클래스 목록을 나타내는 DOMTokenList 객체입니다.
- parentNode: 요소의 부모 노드를 나타내는 객체입니다.
- childNodes: 요소의 자식 노드 목록을 나타내는 NodeList 객체입니다.
- attributes: 요소의 속성을 나타내는 NamedNodeMap 객체입니다.
- textContent: 요소의 텍스트 내용을 나타냅니다.
- dataset: 요소의 데이터 속성을 나타내는 객체입니다.
이 외에도 특정 이벤트나 요소의 종류에 따라 다양한 속성이 추가될 수 있습니다!
🔥마무리
이벤트 핸들러를 작성할 때, e.target을 적절히 활용하여 필요한 속성을 가져와서 사용해야 겠다!
@동혁이 :: Eun_Frontend
프론트엔드 공부일지 입니다.
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!