이 게시물은 'event.target'과 JavaScript에서의 사용법을 설명합니다.
JavaScript에서 'event.target'은 무엇입니까?
“ 이벤트.대상 은(는) '의 속성/속성입니다. 이벤트 ” 자바스크립트에서. 이벤트를 트리거한 요소를 나타냅니다. event.target 속성에 액세스하려면 요소의 이벤트를 수신해야 합니다. “ addEventListener() ” 메서드는 특정 이벤트를 듣기 위해 활용됩니다.
통사론
'event.target' 속성을 사용하려면 다음 구문을 따르십시오.
요소. addEventListener ( '<이벤트>' , 기능 ( 이벤트 ) {
콘솔. 통나무 ( 이벤트. 표적 )
} )
주어진 구문에서
- “ addEventListener() ” 메서드는 특정 요소에 대한 이벤트 핸들러를 추가하는 데 사용됩니다.
- “ <이벤트> '는 '와 같은 이벤트를 나타냅니다. 딸깍 하는 소리 ”, “ 마우스 오버 ', 등등.
예
주어진 예에서 '를 사용하여 이벤트를 트리거한 요소를 가져옵니다. 이벤트.대상 ' 재산.
여기에서 id를 할당하여 버튼을 생성합니다. btn ” 버튼에 액세스하기 위해 JavaScript에서 사용됩니다.
< 버튼 ID = 'btn' > 여기를 클릭하세요 단추 >
JavaScript 파일에서 먼저 할당된 ID를 사용하여 ' getElementById() ' 방법:
const 단추 = 문서. getElementById ( 'btn' ) ;버튼에 이벤트 리스너를 연결합니다. “ 딸깍 하는 소리 ” 이벤트는 버튼 클릭 시 시작되며 이벤트 객체는 이벤트 리스너에 인수로 전달됩니다. “ 이벤트.대상 ” 속성은 이벤트를 트리거한 버튼 요소에 대한 참조를 얻기 위해 리스너 함수에서 액세스할 수 있습니다.
단추. addEventListener ( '딸깍 하는 소리' , 기능 ( 이벤트 ) {콘솔. 통나무 ( '대상 이벤트:' , 이벤트. 표적 ) ;
} ) ;
출력에는 클릭한 특정 버튼의 참조가 표시됩니다.
더 많은 정보를 얻고 해당 속성을 사용하여 대상 이벤트에 스타일 지정과 같은 다양한 기능을 적용할 수 있습니다.
'event.target'의 속성은 무엇입니까?
대상 요소에 대한 정보를 제공하는 'event.target' 속성의 다양한 속성이 있습니다. event.target 객체의 공통 속성 중 일부는 다음과 같습니다.
| event.target 속성 | 설명 |
| 이벤트.대상.태그 이름 | '를 얻는 데 사용됩니다. 이름 ” 대상 요소의 HTML 태그. |
| 이벤트.대상.값 | '를 검색하는 데 활용 값 ” 대상 요소의. 이 속성은 주로 입력 요소에 사용됩니다. |
| 이벤트.대상.ID | '를 얻기 위해 ID ” 속성을 지정하려면 지정된 속성을 사용하십시오. |
| 이벤트.대상.클래스 목록 | '의 목록 클래스 ” 대상 요소를 포함하는 이 특성에 의해 액세스됩니다. |
| 이벤트.대상.텍스트 콘텐츠 | '를 얻는 데 사용됩니다. 텍스트 내용 ” 대상 요소의. |
| 이벤트.대상.href | 이 속성은 ' 헥사 ” 링크와 같은 대상 요소의 속성. |
| 이벤트.대상.스타일 | 수정을 위해 ' CSS ” 속성을 사용하려면 이 속성을 사용하십시오. |
예제 1: 대상 요소의 배경색 변경
제공된 예에서 '를 사용하여 대상 요소의 배경색을 변경합니다. 스타일 '의 속성 딸깍 하는 소리 ' 이벤트:
const 단추 = 문서. getElementById ( 'btn' ) ;단추. addEventListener ( '딸깍 하는 소리' , 기능 ( 이벤트 ) {
이벤트. 표적 . 스타일 . 배경색 = '파란색' ;
} ) ;
산출
예제 2: 대상 요소의 값 가져오기
태그를 사용하여 입력 텍스트 필드와 텍스트를 표시할 영역을 만듭니다. 입력 필드에 ID를 할당하고
태그를 ' takeInput ' 그리고 ' 보여주다 ”, 각각:
< 입력 유형 = '텍스트' ID = 'takeInput' >< 아이디 = '보여주다' > 피 >
'를 사용하여 텍스트 필드의 참조를 가져옵니다. getElementById() ' 방법:
입력되었다 = 문서. getElementById ( 'takeInput' ) ;사용 ' 값 ' 속성을 ' 이벤트.대상 ”를 사용하여 대상 요소의 값을 가져옵니다.
입력. addEventListener ( '입력' , ( 이벤트 ) => {문서. getElementById ( '보여주다' ) . innerHTML = 이벤트. 표적 . 값 ;
} )
텍스트 상자에 입력한 값이 ' 값 ' 기인하다:
이것이 JavaScript의 'event.target'에 관한 전부였습니다.
결론
“ 이벤트.대상 ”는 이벤트를 트리거/초기화한 요소를 나타냅니다. 대상 요소에 대한 정보를 제공하는 'event.target' 속성의 일부 속성이 있습니다. 예를 들어, ' 이벤트.대상.태그 이름 ”, “ .값 ”, “ .ID ”, “ .스타일 ', 등등. 이 게시물은 'event.target', 속성 및 JavaScript에서의 사용법을 설명했습니다.