Open In App

How to simulate a click with JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:

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: 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 ?

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 ?

How to simulate a click with JavaScript ?



Last Updated : 29 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads