July 28, 2021

How to Trigger Click Event in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to trigger click event in javascript. If you do a basic search on google to find tutorials about triggering click event or simulating click event in javascript, then you will know there are too many ways to achieve this. Click event is nothing more than an action which is triggered by a user using mouse click on the web page.

In this tutorial, I am going to cover 2 basic methods which you can use to trigger click event programmatically in javascript.

click() method

Most of the elements in the DOM support click() method. We can leverage this method to trigger click event on any element. When you call click() method on an element, a click event is dispatched and event listener in response will execute event handler function. We are going to cover the same technique. Please have a look over code example and steps given below.

HTML & CSS:

We created 2 elements, button and div and wrapped them with another div which will act as container.
Child div element is given an id of box which will display a square on the screen with a background color of red.
We have done basic styling using CSS.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>

    <div class="container">
        <button>Trigger Click</button>
        <div id="box"></div>
    </div>

    <script src="script.js"></script>
</body>

</html>

.container {
  text-align: center;
}

#box {  
  height: 400px;
  width: 400px;
  background-color: red;
  margin: 5px auto;
}

Javascript:

We got reference of button and box using querySelector() method and stored them in btn and box variable.
We added click() event listener to the button, which in response will trigger click event of box.
We added click() event listener to the box, which in response will change the background color of the box from red to green.

let btn = document.querySelector("button");
let box = document.querySelector("#box");

btn.addEventListener("click", (e) => {
  box.click();
});

box.addEventListener("click", (e) => {
  box.style.backgroundColor = "green";
});

MouseEvent Constructor

Events which occur due to user interaction by a pointing device such as mouse are part of MouseEvent contructor. The most common mouse events are click, dblclick, mousedown, mouseup etc. MouseEvent constructor takes 2 parameters.

First parameters specifies event name which should be string. In our case, it will be “click”. The second parameter is optional and it can have bunch of properties which can help you in specifying where you want to click on window or screen in terms of position, which mouse button should be pressed etc. I suggest you to have a look over MDN docs to know more about MouseEvent constructor.

In this example, we want to trigger click event and make sure shift key is pressed when it happens. The HTML and CSS code is same as shown above in the example. The only difference is in javascritp code. Please have a look over code example and steps given below.

Javascript:

We got reference of button and box using querySelector() method and stored them in btn and box variable.
We added click() event listener to the button. In the event handler function, we are creating a new mouse event using MouseEvent constructor.
From the above discussion, you know MouseEvent constructor takes 2 parameters, so we are providing it an event name click and an optional object where shiftKey property is set to true.
We added click() event listener to the box. In the event handler function, we are checking if shiftKey property is true or not in the event object. If yes, then change the background color of the box from red to green, otherwise do nothing.

let btn = document.querySelector("button");
let box = document.querySelector("#box");

btn.addEventListener("click", (e) => {
  var clickEvent = new MouseEvent("click", { shiftKey: true });
  box.dispatchEvent(clickEvent);
});

box.addEventListener("click", (e) => {
  if (e.shiftKey) {
    box.style.backgroundColor = "green";
  }
});

click() method

MouseEvent Constructor

You May Also Like: