How to simulate a click with JavaScript ?
In this article, we are going to learn how can we simulate a click with JavaScript. To simulate a click with JavaScript we have to create a function or event.
These are the following ways to solve this problem:
- The click() method is used to simulate a mouse click on an element.
- It fires the click event of the element on which it is called. The event bubbles up to elements higher in the document tree and fires their click events also.
- The element to be clicked is first selected and the click() method is used.
- This simulates a click on the element.
Syntax:
element.click()
Example: This example shows the implementation of the above-explained approach.
html
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >
How to simulate a click with JavaScript ?
</ title >
</ head >
< body >
< h1 style = "color: green" >
GeeksforGeeks
</ h1 >
< b >
How to simulate a click
with JavaScript ?
</ b >
< p >
The button was clicked
< span class = "total-clicks" ></ span >
times
</ p >
< button id = "btn1" onclick = "addClick()" >
Click Me!
</ button >
< script type = "text/javascript" >
let clicks = 0;
function addClick() {
clicks = clicks + 1;
document.querySelector('.total-clicks').textContent
= clicks;
}
// Simulate click function
function clickButton() {
document.querySelector('#btn1').click();
}
// Simulate a click every second
setInterval(clickButton, 1000);
</ script >
</ body >
</ html >
|
Output:
How to simulate a click with JavaScript ?
Method 2: Creating a new CustomEvent
- The CustomEvent constructor is used to create a new event to be used on any element and handles the events.
- The ‘click’ event can be passed to the constructor of CustomEvent to create a click event.
- This created Event has various properties which can be accessed to customize the event. The element to be clicked on is first selected.
- The dispatchEvent() method is used on this element to fire the click event. The dispatchEvent() method dispatches an Event at a specified target.
- This simulates a click on the element selected.
Syntax:
click_event = new CustomEvent('click');
btn_element = document.querySelector('#element');
btn_element.dispatchEvent(click_event);
Example: This example shows the implementation of the above-explained approach.
html
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >
How to simulate a click with JavaScript ?
</ title >
</ head >
< body >
< h1 style = "color: green" >
GeeksforGeeks
</ h1 >
< b >
How to simulate a click
with JavaScript ?
</ b >
< p >
The button was clicked
< span class = "total-clicks" ></ span >
times
</ p >
< button id = "btn1" onclick = "addClick()" >
Click Me!
</ button >
< script type = "text/javascript" >
let clicks = 0;
function addClick() {
clicks = clicks + 1;
document.querySelector('.total-clicks').textContent
= clicks;
}
// Simulate click function
function clickButton() {
click_event = new CustomEvent('click');
btn_element = document.querySelector('#btn1');
btn_element.dispatchEvent(click_event);
}
// Simulate a click every second
setInterval(clickButton, 1000);
</ script >
</ body >
</ html >
|
Output:
How to simulate a click with JavaScript ?
Last Updated :
29 Nov, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...