How to simulate a click with JavaScript ?

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



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output after running of three seconds:
click-method

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output after running of 13 seconds:
customevent



My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.