Simulate button click javascript

Now, go through the below-given JavaScript lines:

document. getElementById ( «simulate» ) . click ( )

let get = document. getElementById ( «head» )

get. innerText = «Click Simulated!»

• Define a function “simulateClick()”.
• Here, access the created buttons using the “document.getElementById()” method and apply the “click()” method to them.
• Now, similarly, access the allocated heading and apply the “innerText” property to display the stated message as a heading upon the simulated click.

In the above output, it is evident that both created buttons simulate the click.

This blog demonstrates how to apply a click simulation using JavaScript.

Conclusion

An “onclick” event, the “addEventListener()” method, or the “click()” method can be utilized to simulate a click with JavaScript. An “onclick” event can be applied to simulate a click each time the button is clicked in the form of a counter. The “addEventListener()” method can be used to attach an event to the link and notify the user upon the click simulation. The “click()” method can be applied to the created buttons and performs the required functionality for each of the buttons. This write-up explains how to apply a click simulation in JavaScript.

About the author

Umar Hassan

I am a Front-End Web Developer. Being a technical author, I try to learn new things and adapt with them every day. I am passionate to write about evolving software tools and technologies and make it understandable for the end-user.

Источник

Simulate a Click With JavaScript

1. Simulate a Click Event Using click() in JavaScript
2. Implementing a Function to Simulate a Custom Click Event in JavaScript
3. Conclusion

Simulating a click in JavaScript means that the click event will be automatically triggered on the HTML element without clicking it manually by the user. This simulated click functionality can come in handy in various situations while creating interactive web pages.

To implement the simulated click functionality, we can use a built-in click() functionality provided by the JavaScript programming language or create our own click event using the MouseEvent class.

Let’s see how to implement both of these ways in this article.

Simulate a Click Event Using click() in JavaScript

The click() method triggers a click event in JavaScript. This event is triggered without a user’s interaction.

The click() can be used with a supporting element, such as input . This method works based on a concept called Event bubbling.

In event bubbling, an event bubbles up to the higher elements in the document tree and then fires their click events whenever it is triggered.

In the below HTML document, we have an input tag, a checkbox, and a script tag that links the JavaScript file to the HTML document.

The input tag has an id of myCheck and an event called mouseover , which takes the function myFunction as an input.

body>  input type="checkbox" id="myCheck" onmouseover="myFunction()">  script src="./index.js">script>  body> 

The myFunction is defined inside the JavaScript file. Inside this function, we are getting the input tag that we have created using its id by the document.getElementById() function.

We then add the click() function to that input.

function myFunction()   document.getElementById("myCheck").click(); > 

After executing this code on the browser, this is the output that you will get.

The drawback of this method is that it only works with some of the HTML elements. To learn more about the click() function, visit MDN docs.

Implementing a Function to Simulate a Custom Click Event in JavaScript

To simulate a custom click event in JavaScript, we must implement our function. For this, we will use the MouseEvent API for adding the click event.

Before we create our function, let’s first create the HTML document. This HTML document will have an anchor tag and a link to the JavaScript file.

The HTML document looks like this.

body>  a href="#" id="link">Click Mea>  script src="index.js">script>  body> 

To create a new mouse event in JavaScript, we must create an object of the MouseEvent class. The MouseEvent constructor takes two parameters typeArg and mouseEventInit .

 event = new MouseEvent(typeArg, mouseEventInit); 

The typeArg is the event’s name that it wants to create. In this case, it’s a click event.

The mouseEventInit is a dictionary that can take various parameters in itself, such as bubbles , view , clientX , metaKey , etc. To learn more about the MouseEvent constructor and the various parameters, please read its documentation at the MDN website.

bubbles : In event bubbling, the event will start executing from the innermost element and then up to its ancestors (parents). It takes a boolean value.

We have set it to false because we will be registering this event on a single element; the anchor tag. The element is also not present in a nested fashion.

cancelable : This tells the browser whether the event that we are executing can be canceled or not. It also takes a boolean value.

view : The MouseEvent also accepts view, which is a part of the UIEvent . It is set to null by default, but we can set its value to window as well.

This will execute the event inside the browser window.

var simulateClick = new MouseEvent('click',   bubbles: false,  cancelable: true,  view: window, >);  var url = document.getElementById('link'); url.addEventListener('click', () => console.log('clicked')) url.dispatchEvent(simulateClick) 

The custom event created using the MouseEvent class will store inside the simulateClick variable.

To get the anchor tag inside our JavaScript file, we will use the document.getElementById method and pass the anchor tag, link , in the id. We will then store that element inside a variable called url .

Now that we have the reference to the anchor tag inside our JavaScript file and our custom click event is also ready, it’s time to add it to the anchor tag.

To fire up the simulated click event that we have created, we will use the dispatchEvent method on the url variable and then pass the simulateClick inside it as an argument.

To ensure that the simulateClick event that we have created is working correctly, we will add another click event on the url variable using addEventListener . Then we will console log a statement.

This line of code is to check whether the event we have created has been dispatched or not. It can be removed at any point.

This event should be added before executing our custom simulateClick event. Otherwise, you will not know whether the simulateClick event has been successfully executed or not.

The above code will produce the output below:

Conclusion

This article demonstrates two methods of simulating a click event in JavaScript. One way is by using a built-in function called click() , and another way is by creating and executing our custom click event simulateClick .

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

Related Article — JavaScript Event

Источник