How to Create a Click Event Handler in JavaScript

How to Create a Click Event Handler in JavaScript

In this quick tutorial we’re going to show you how to attach a click event handler to an element.

In this quick tutorial we’re going to show you how to attach a click event handler to an element.

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
});


At Welcm we design, develop and support websites, bespoke software and mobile apps. We specialise in the Laravel framework.

If you have a project you would like to discuss please send an enquiry from our contact page, email us at enquiries@welcm.uk or call us on 01252 950 650.

We also make Visitor Management Easy at https://welcm.ly