기본적으로 우리는 자바스크립트로 프로그래밍하는 동안 버튼 클릭으로 어떤 기능이든 생성할 수 있는 상황에 직면하게 됩니다. 예를 들어, 웹페이지나 사이트의 자동화 테스트 시에는 좀 더 많은 기능을 검토해야 합니다. 이러한 경우 자바스크립트의 클릭 이벤트 트리거 기술은 명시된 문제를 해결하는 데 더욱 안정적이고 효율적이 됩니다.
이번 시간에는 자바스크립트의 트리거 클릭 이벤트 절차에 대해 알아보겠습니다.
자바스크립트에서 클릭 이벤트를 실행하는 방법:
자바스크립트에서 클릭 이벤트를 트리거하려면 아래 기술을 적용해야 합니다.
a) click() 메소드
b) addEventListener() 및 dispathEvent 메소드
이제 위에서 작성한 방법을 사용하여 다음과 같이 설명하겠습니다.
방법 1:
자바스크립트의 클릭 이벤트 메소드를 사용하여 클릭 이벤트를 트리거합니다.
언급된 요소에는 클릭 방식 작업을 수행하는 데 사용됩니다. 사용자가 필요한 버튼을 클릭할 때 버튼 생성, ID 가져오기 및 클릭 이벤트 트리거를 통해 사용자 정의 함수를 사용하면 이 메서드를 구현할 수 있습니다.
더 명확하게 설명하려면 아래 예제를 살펴봐야 합니다.
예:
아래에 주어진 예에서 '여기를 클릭하세요' , 클릭 이벤트에 액세스하기 위한 클릭 이벤트와 함께 ID가 포함된 버튼이 생성됩니다.
Click here
자바스크립트에서 해당 ID를 지정하면 document.getElementById 메소드에서 생성된 버튼에 액세스해야 합니다. 다음 작업을 수행하기 위해 클릭 이벤트가 호출됩니다.
const get= document.getElementById('btn'); get.click();
마지막으로 버튼을 클릭하면 다음과 같은 함수를 인쇄하도록 정의하겠습니다. '클릭이벤트()' 콘솔에서 click 메소드를 사용하는 방식입니다.
function clickEvent() { console.log('now the Click Event is triggered ') } 위의 각 코드 출력에서 자동화된 방식으로 클릭 메서드를 사용하여 여기를 클릭하는 버튼이 클릭되는 것을 관찰했습니다.
방법 2:
addEventListener() 및 dispatchEvent() 메소드를 사용하여 자바스크립트에서 클릭 이벤트를 트리거합니다.
자바스크립트에서는 자바스크립트 이벤트 대상 인터페이스에서 제공하는 통합 메소드입니다.
이벤트 리스너는 이 메소드에 의해 등록됩니다. 언급된 이벤트가 대상에서 포착되면 구성된 함수를 호출합니다.
이벤트 구문:
target.addEventListener( $type, $listener); target.addEventListener( $type, $listener, $options); target.addEventListener( $type, $listener, $useCapture);
구문 설명:
- 위 구문에는 다음과 같은 매개변수가 있습니다. $type , 이는 필수 매개변수입니다. 모니터링할 이벤트 유형을 나타내는 매개변수는 하나의 문자열만 허용합니다. 이 매개변수는 대소문자를 구분하는 매개변수입니다. 키보드, 클릭, 데이터베이스, 입력 등과 같은 다양한 이벤트가 지원됩니다.
- 같은 방식으로, $listener 필수 매개변수이기도 합니다. 언급된 유형의 이벤트가 발생하면 이벤트에 대한 알림이 이 매개변수에 의해 객체로 수신됩니다. javascript 함수 또는 Eventlistner 인터페이스에서 이 객체를 구현해야 합니다.
- 반면, $옵션 이다 선택적 매개변수 그 안에.
예: 1
Open bing const link = document.getElementById('btn'); link.addEventListener('click', e => {}); for(let i = 0; i <5; i++) { link.dispatchevent(new event('click')); } function opengooglebymethod() console.log('the required event is triggered') < pre> <p> <strong>Output:</strong> </p> <pre> 'The required event is triggered'. 'The required event is triggered'. 'The required event is triggered'. 'The required event is triggered'. 'The required event is triggered'. </pre> <p> <strong>Example 2:</strong> </p> <p>In this example, first of all, we will include a button with a corresponding id with an onclick event along with a value as same as like previous one.</p> <pre> Click here </pre> <p>After that, with the help of the <strong> <em>addEventListener()</em> </strong> method, we will retrieve the button and click the event in it to specify the <strong> <em>'e'</em> </strong> in its argument, which refers to the event click object.</p> <pre> const get = document.getElementById('btn'); get.addEventListener('click', e => {}); get.dispatchEvent(new Event('click')); </pre> <p>Finally, as same as the previous method, we will define the click event to display the corresponding message in it at the time the click event is triggered.</p> <pre> function clickEvent() { console.log('The required event is triggered ') } </pre> <hr></5;> 예 2:
이 예에서는 먼저 이전과 동일한 값과 함께 onclick 이벤트와 함께 해당 ID를 가진 버튼을 포함합니다.
Click here
그 후, 의 도움으로 추가이벤트리스너() 메서드를 사용하면 버튼을 검색하고 그 안에 있는 이벤트를 클릭하여 '그것은' 이벤트 클릭 개체를 참조하는 인수에 있습니다.
const get = document.getElementById('btn'); get.addEventListener('click', e => {}); get.dispatchEvent(new Event('click')); 마지막으로 이전 방법과 동일하게 클릭 이벤트가 트리거될 때 해당 메시지를 표시하도록 클릭 이벤트를 정의하겠습니다.
function clickEvent() { console.log('The required event is triggered ') }