How to Simulate a Click in JavaScript?

Last Updated : 16 Sep, 2024

Simulating a click in JavaScript means triggering a click event on an HTML element using code, rather than requiring manual user interaction. This technique is useful for automating actions like clicking buttons, links, or other interactive elements, enhancing web functionality, and triggering hidden or background processes.

Why Simulate Clicks?

Automate User Interactions: Perform repetitive tasks automatically, such as submitting forms or navigating through a series of steps.
Trigger Hidden Actions: Execute functions that are linked to click events without needing user input.
Enhance User Experience: Improve functionality by preemptively handling actions based on conditions, improving the flow of your web application.

Methods to Simulate Clicks in JavaScript

Let’s explore these methods:

Table of Content

Using the click() method
Creating a new CustomEvent

Method 1: Using the click() method

The click() method simulates a mouse click on an element. It fires the click event of the element on which it is called, allowing the event to bubble up the document tree and trigger click events on parent elements.

Steps:

Select the element you want to click using a DOM selection method like querySelector.
Use the click() method to simulate the click event.

Syntax

element.click()

Example: In this example the simulates a button click every second using JavaScript. The setInterval() function triggers clickButton(), which calls the button’s click() method, incrementing and displaying the click count automatically.

<!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 allows you to create a new event that can be used on any element and handle specific events. By passing the ‘click’ event to the constructor, you can create a custom click event.

Steps:

Select the element you want to click using a DOM selection method like querySelector.
Create a new CustomEvent object for the ‘click’ event.
Use the dispatchEvent() method to fire the custom click event on the selected element.

Syntax:

click_event = new CustomEvent('click');
btn_element = document.querySelector('#element');
btn_element.dispatchEvent(click_event);

Example: In this example the simulates a button click every second using JavaScript. It creates and dispatches a custom click event on the button, incrementing and displaying the click count automatically.

<!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>