JavaScript로 클릭을 시뮬레이션하는 방법은 무엇입니까?
JavaScript에서 클릭 시뮬레이션을 적용하기 위해 다음 접근 방식을 구현할 수 있습니다.
접근법 1: onclick 이벤트를 사용하여 JavaScript로 클릭 시뮬레이션
“ 온 클릭 ” 이벤트는 버튼을 눌렀을 때 발생합니다. 이 접근 방식은 버튼 클릭 시 함수를 호출하고 ' 클릭수 ” 버튼을 클릭할 때마다
참고: “ 온 클릭 ” 이벤트는 특정 기능을 붙이기만 하면 간단히 적용할 수 있습니다.
예시
다음 코드 조각을 살펴보십시오.
< 센터 >
< h3 스타일 = '배경색: 하늘색;' > 시뮬레이션 클릭 < 기간 수업 = '세다' > 기간 > 타임스 h3 >
< 버튼 ID = 'btn1' 온 클릭 = '카운트클릭()' > 클릭 해주세요 ! 단추 >
센터 >
- '와 함께 지정된 제목을 포함합니다. <스팬> ' 태그를 사용하여 ' 세다 클릭 수.
- 다음 단계에서 '가 첨부된 버튼을 만듭니다. 온 클릭 ” 버튼 클릭 시 액세스되는 countClick() 함수로 리디렉션되는 이벤트.
이제 다음 JavaScript 코드 라인을 살펴보겠습니다.
< 스크립트 >
클릭하자 = 0 ;
함수 countClick ( ) {
클릭 = 클릭 + 1 ;
문서. 쿼리 선택기 ( '.세다' ) . 텍스트 내용 = 클릭 ;
}
스크립트 >
코드의 위 js 부분에서:
- 여기에서 먼저 '로 클릭을 초기화합니다. 0 '.
- 그런 다음 '라는 이름의 함수를 선언합니다. 카운트클릭() '. 정의에서 초기화된 ' 클릭 ' 와 함께 ' 1 '. 이렇게 하면 버튼을 클릭할 때마다 카운트가 증가합니다.
- 마지막으로 ' 기간 ” 요소를 사용하여 document.querySelector() ' 방법. 또한 ' 텍스트 내용 ” 속성을 사용하여 앞서 논의한 증가된 클릭 수를 span 요소에 할당합니다.
출력은 다음과 같습니다.
클릭할 때마다 증가하는 타이머의 기능은 위의 출력에서 확인할 수 있습니다.
접근법 2: addEventListener() 메서드를 통해 JavaScript로 클릭 시뮬레이션
“ addEventListener() ” 메서드는 요소에 이벤트 핸들러를 할당합니다. 이 방법은 특정 이벤트를 요소에 첨부하고 이벤트 트리거 시 사용자에게 경고함으로써 구현할 수 있습니다.
통사론
요소. addEventListener ( 이벤트, 기능 )주어진 구문에서:
- “ 이벤트 '는 이벤트 이름을 나타냅니다.
- “ 기능 ”는 이벤트 발생 시 실행할 함수를 가리킵니다.
예시
아래 주어진 데모는 명시된 개념을 설명합니다.
< 센터 >< 신체 >< a href = '#' ID = '링크' > 링크를 클릭 ㅏ >
신체 > 센터 >
< 스크립트 >
염소가되다 = 문서. getElementById ( '링크' ) ;
가져 오기. addEventListener ( '딸깍 하는 소리' , ( ) => 알리다 ( '시뮬레이션 클릭!' ) )
스크립트 >
위의 코드에서:
- 먼저 ' 닻 지정된 링크를 포함하는 ” 태그
- 코드의 JavaScript 부분에서 ' document.getElementById() ' 방법.
- 마지막으로 ' addEventListener() ” 접근된 “ 링크 '. “ 딸깍 하는 소리 이 경우 생성된 링크를 클릭하면 사용자에게 경고하는 이벤트가 첨부됩니다.
산출
접근법 3: click() 메서드를 사용하여 JavaScript로 클릭 시뮬레이션
“ 딸깍 하는 소리() ” 메서드는 요소에 대해 마우스 클릭 시뮬레이션을 수행합니다. 이 메서드는 이름이 지정하는 대로 연결된 버튼에 대한 클릭을 직접 시뮬레이트하는 데 사용할 수 있습니다.
통사론
요소. 딸깍 하는 소리 ( )주어진 구문에서:
- “ 요소 ”는 클릭이 실행될 요소를 가리킵니다.
예시
다음 코드 스니펫은 명시된 개념을 설명합니다.
< 센터 >< 신체 >< h3 > 찾으셨나요 이것 도움이 되는 페이지 ? h3 >
< 버튼 클릭 = '시뮬레이트클릭()' ID = '시뮬레이션' > 예 단추 >
< 버튼 클릭 = '시뮬레이트클릭()' ID = '시뮬레이션' > 아니요 단추 >
< h3 아이디 = '머리' 스타일 = '배경색: 연두색;' > h3 >
신체 > 센터 >
- 먼저 '' 안에 명시된 제목을 포함합니다. <센터> ” 태그.
- 그런 다음 지정된 ID로 두 개의 다른 버튼을 만듭니다.
- 또한 '를 첨부합니다. 온 클릭 ” 이벤트는 둘 다 함수 simulationClick()을 호출합니다.
- 다음 단계에서 지정된 ' ID ”를 즉시 사용자에게 알리기 위해 딸깍 하는 소리 '가 시뮬레이션됩니다.
이제 아래 주어진 JavaScript 줄을 살펴보십시오.
< 스크립트 >함수 시뮬레이션 클릭 ( ) {
문서. getElementById ( '시뮬레이션' ) . 딸깍 하는 소리 ( )
하자 = 문서. getElementById ( '머리' )
가져 오기. innerText = '시뮬레이션 클릭!'
}
스크립트 >
- 함수 정의 ' 시뮬레이션 클릭() '.
- 여기에서 ' document.getElementById() ” 방법을 적용하고 “ 딸깍 하는 소리() ” 그들에게 방법.
- 이제 마찬가지로 할당된 제목에 액세스하고 ' innerText ” 속성을 사용하여 시뮬레이션된 클릭 시 명시된 메시지를 제목으로 표시합니다.
산출
위의 출력에서 생성된 두 버튼 모두 클릭을 시뮬레이트하는 것이 분명합니다.
이 블로그는 JavaScript를 사용하여 클릭 시뮬레이션을 적용하는 방법을 보여줍니다.
결론
“ 온 클릭 ” 이벤트, “ addEventListener() ” 방법 또는 “ 딸깍 하는 소리() ” 메서드를 활용하여 JavaScript로 클릭을 시뮬레이션할 수 있습니다. “ 온 클릭 ” 이벤트를 적용하여 카운터 형태로 버튼을 클릭할 때마다 클릭을 시뮬레이션할 수 있습니다. “ addEventListener() ” 메서드를 사용하여 링크에 이벤트를 첨부하고 클릭 시뮬레이션 시 사용자에게 알립니다. “ 딸깍 하는 소리() ” 메서드는 생성된 버튼에 적용할 수 있으며 각 버튼에 필요한 기능을 수행합니다. 이 글은 JavaScript에서 클릭 시뮬레이션을 적용하는 방법을 설명합니다.