Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to simulate a click with JavaScript ?

  • Last Updated : 31 Jul, 2019

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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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.




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

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.




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

Output after running of 13 seconds:
customevent




My Personal Notes arrow_drop_up
Recommended Articles
Page :