Click event tutorial
last modified August 24, 2023
Click event tutorial how to register an event handler for a click event.
Click event
The click event is raised when the user clicks on an element. It fires after the mousedown and mouseup events, in that order.
An event handler must be registered for an event with addEventListener.
Click event example
The following example registers an event handler for a click event.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click event</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="output"></div>
<script src="main.js"></script>
</body>
</html>
In the example, we have register a click event handler for the body element. We show the coordinates of the mouse pointer in the output div.
body {
height: 100vh;
padding: 6px;
border: 1px solid steelblue;
}
This is some styling. Note that in order for the example to work, we must set a height for the body.
const el = document.body;
const output = document.getElementById('output');
console.log(el);
el.addEventListener('click', e => {
output.innerHTML = `x: ${e.x} y: ${e.y}`;
console.log(e.x);
});
In the code, we register a click event handler for the body element.
When the user clicks on the body of the document, the x and y
coordinates of the mouse pointer are outputted.
output.innerHTML = `x: ${e.x} y: ${e.y}`;
An event object is generated for the click event. We can get some information about
the event from the event object. In our case, we get the x and y
coordinates.
In this article we have shown how to work with a click event.