How to simulate a click with JavaScript ? - GeeksforGeeks

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:
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:
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:
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?