As always in our tutorials, we don't want to just show you what to do. We want to explain what what we do actually means. If you're in a rush and just want the code, simply scroll to the end of the article for the TL;DR
What is a click event handler?
First things first… what does “click event handler” actually mean?
Let’s split this into two parts for clarity. MDN Web Docs describes a click event really nicely so I’m going to quote them here:
An element receives a click event when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
Given we now know what a click event is, we can think of a click event handler as a tool that allows us to do something when a click event occurs.
When would we want to use one?
The short answer is “loads”.
Click event handlers are super-common and used all over the place… popups, modals, buttons, animations. Pretty much any time when clicking an element does something on a web page, a click event handler has been used to make the something happen.
How does it work?
We won’t get too technical here… we’re just going to look at this from a high level.
- Our JavaScript code tells the browser to pay particular attention to an element (or elements) we specify and listen out for users clicking on that element.
- We can specify the element by using its ID or with a class name if we want to specify multiple elements. We can even specify by element type (e.g. all <button> elements).
- When the browser detects a user has clicked on the specified element our JavaScript code tells it to do something. That “something” is stored within a function.
So… what’s the code?
To help with context let’s imagine we want to add a click event to a button with an ID of #myBtn on our web page. To do so our click event handler would look like this
document.querySelector('#myBtn').addEventListener('click', function () {
// do something
});
Can you explain the code?
Sure! Let’s do it in bits…
document.querySelector('#myBtn')
This tells the browser to pay attention to the <button id="myBtn"> element on our page.
.addEventListener('click',
This tells the browser to listen out for clicks on the elements we specified which, in this example, is the <button id="myBtn"> element.
function () {
// do something
});
This is what the browser should do we the click event occurs.
TL;DR
If you want to handle a click event use this code. If necessary, substitute “#myBtn” for whatever element you want to attach the click event handler to (e.g. an ID, class or other element type).
document.querySelector('#myBtn').addEventListener('click', function () {
// do something
});
