To simulate a click with JavaScript we have two popular ways, both ways are explained with proper example described below.
Method 1: Using the click() method.
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: The setInterval() function is used to call the function which simulates the click. The button has an onclick handler which increases the count variable each time the button is clicked normally or through simulating the click.
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. The CustomEvent interface handles the events initialized by an application for any purpose. 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: The setInterval() function is used to call the function which simulates the click. The button has an onclick handler which increases the count variable each time the button is clicked normally or through simulating the click.
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 ?