이 게시물에서는 JavaScript를 사용하여 event.target에 특정 클래스가 있는지 여부를 확인하는 방법을 설명합니다.
JavaScript를 사용하여 event.target에 특정 클래스가 있는지 확인하는 방법은 무엇입니까?
event.target에 특정 클래스가 있는지 확인하려면 다음 JavaScript 사전 정의 메서드를 사용하십시오.
event.target에서 클래스를 결정하기 위해 이러한 메서드가 어떻게 작동하는지 살펴보겠습니다.
방법 1: contains() 방법을 사용하여 event.target에 특정 클래스가 있는지 확인
요소가 특정 클래스에 속하는지 확인하려면 ' 포함() ”의 방법 클래스리스트 ' 물체. contains() 메서드는 지정된 항목이 컬렉션에 있는지 여부를 식별하는 데 사용됩니다. 그것의 출력 “ 진실 ” 항목이 있는 경우, 그렇지 않으면 “ 거짓 '. 요소의 클래스를 결정하는 가장 효율적인 방법입니다.
통사론
아래 주어진 구문에 따라 event.target에 특정 클래스가 있는지 여부를 contains() 메서드를 사용하여 확인합니다.
이벤트. 표적 . 클래스리스트 . 포함 ( '클래스 이름' )위 구문에서:
- “ 이벤트.대상 ”는 특정 클래스를 포함하는지 여부를 확인하는 트리거 이벤트입니다.
- “ 클래스 이름 ”는 트리거된 이벤트의 일부인 CSS 클래스의 이름을 식별합니다.
반환 값
'를 반환합니다. 진실 ” 트리거된 이벤트에 지정된 클래스가 있는 경우; 그렇지 않으면 ' 거짓 '.
예시
먼저 ' 사업부 HTML을 사용하는 HTML 파일의 ” 요소 <사업부> 꼬리표:
< 사업부 수업 = '가운데 div div1Style' ID = 'div1' > 1< 사업부 수업 = '사업부 div2스타일' ID = 'div2' > 둘
< 사업부 수업 = '사업부 div3스타일' ID = 'div3' > 삼
사업부 >
사업부 >
사업부 >
CSS 스타일을 사용하여 요소의 스타일을 지정합니다. 이렇게 하려면 CSS 클래스 ' .div ” 모든 div 요소:
. 사업부 {심 : 10px ;
키 : 100픽셀 ;
너비 : 100픽셀 ;
여유 : 10px ;
}
생성' .센터 ” 페이지 중앙에 요소를 설정하기 위한 클래스:
. 센터 {여유 : 자동 ;
}
이제 스타일링을 위해 모든 div가 개별적으로 CSS 클래스를 생성합니다. 첫 번째 div의 경우 배경색을 ' 빨간색 ”에서 div1스타일 ' 수업:
. div1스타일{
배경 - 색깔 : 빨간색 ;
}
두 번째 div의 경우 배경색을 ' 무 핑크 ”를 사용하여 rgba(194, 54, 77) ” 코드는 “ div2스타일 ' 수업:
. div2스타일{
배경 - 색깔 : RGB ( 194 , 54 , 77 ) ;
}
배경색 설정 ' 분홍색 '를 생성하여 세 번째 div의 ' div3스타일 ' 수업:
. div3스타일{
배경 - 색깔 : 분홍색 ;
}
위의 HTML 코드를 실행한 후 출력은 다음과 같습니다.
이제 JavaScript 파일 또는 ' 스크립트 ” 태그, 아래 제공된 코드를 사용하여 event.target에 특정 클래스가 있는지 여부를 확인하십시오.
문서. addEventListener ( '딸깍 하는 소리' , 함수 핸들클릭 ( 이벤트 ) {여기서 hasClass = 이벤트. 표적 . 클래스리스트 . 포함 ( '센터' ) ;
알리다 ( '이 div는 'center' 클래스를 포함합니다: ' + hasClass ) ;
} ) ;
위의 코드 조각에서:
- 먼저 DOM의 모든 클릭을 처리할 클릭 이벤트에 이벤트 리스너를 연결합니다.
- 그런 다음 트리거된 이벤트에 CSS 클래스 ' 센터 ” 또는 “의 도움으로 클래스리스트.클래스() ' 방법.
산출
위의 GIF는 div1에 ' 센터 ” 표시되는 클래스 “ 진실 ”, div2 및 div3은 “ 거짓 ”를 포함하지 않는다는 의미입니다. 센터 ' 수업.
방법 2: match() 메서드를 사용하여 event.target에 특정 클래스가 있는지 확인
'라는 또 다른 JavaScript 사전 정의 메소드 성냥() ”는 특정 클래스가 요소 또는 이벤트에 속하는지 여부를 확인하는 데 사용할 수 있습니다. “ 클래스 이름 ”는 요소 또는 대상 이벤트가 특정 클래스를 포함하는지 여부를 결정하는 데 필요한 유일한 매개변수입니다.
통사론
아래 주어진 구문은 matches() 메서드에 사용됩니다.
이벤트. 표적 . 성냥 ( '.클래스 이름' )위의 구문에서
- “ 이벤트.대상 ”는 특정 클래스를 포함하는지 여부를 확인하는 트리거 이벤트입니다.
- “ 클래스 이름 ”는 트리거된 이벤트의 일부인 CSS 클래스의 이름을 나타냅니다. matches() 메소드는 '라는 단어를 나타내는 점(.)과 함께 클래스 이름을 사용합니다. 수업 '.
반환 값
대상 이벤트에 클래스가 있는 경우 ' 진실 ' 또 다른, ' 거짓 '가 반환됩니다.
예시
JavaScript 파일 또는 스크립트 태그에서 아래 코드 줄을 사용하여 ' 성냥() ' 방법:
문서. addEventListener ( '딸깍 하는 소리' , 함수 핸들클릭 ( 이벤트 ) {여기서 hasClass = 이벤트. 표적 . 성냥 ( '.div3스타일' ) ;
알리다 ( '이 div의 클래스는 'div3Style' 클래스와 일치합니다: ' + hasClass ) ;
} ) ;
위의 코드 줄에서:
- 먼저 DOM의 모든 클릭을 처리할 클릭 이벤트에 이벤트 리스너를 연결합니다.
- 그런 다음 ' div3스타일 ” CSS 클래스는 “ 성냥() ' 방법.
- 존재하는 경우 alert()는 '라는 메시지를 표시합니다. 진실 ', 또 다른 ' 거짓 '.
산출
위의 GIF는 div3에만 ' div3스타일 ” 표시되는 클래스 “ 진실 '.
결론
트리거된 이벤트에 지정된 클래스가 있는지 확인하려면 JavaScript ' 포함() ” 방법 또는 “ 성냥() ' 방법. 그러나 contains() 메서드는 요소의 클래스를 결정하는 데 사용되는 가장 유용한 방법 중 하나입니다. 두 방법 모두 ' 진실 ' 트리거된 이벤트에 클래스가 있는 경우 else ' 거짓 '가 반환됩니다. 이 게시물은 JavaScript를 사용하여 event.target에 특정 클래스가 있는지 여부를 확인하는 방법을 설명했습니다.