Handling Click Events in JavaScript

Handling click events is a total breeze with jQuery, but jQuery is also a luxury: an additional load into your visitor's browsers that isn't always necessary. Detecting clicks with vanilla JavaScript is a very simple task with a couple of straightforward ways of achieving it.

onclick

First off ‑ and most similar to the way you would handle clicks with jQuery ‑ we have the onclick method:

var target = document.getElementById('target');target.onclick = function () {  console.log('Click detected!');};

This is ‑ probably ‑ the way you'll want to do it for the majority of cases because it's clear and easy to understand. However, you will find that Internet Explorer 8 does not support DOM2 events so this won't work if you need to include IE8 support, but you can also achieve similar by assigning onclick directly to the element within your markup:

function handleClick() {  console.log('Click detected!');}<button onclick='handleClick()'>Click me</button>

Generally, this isn't a route I would recommend unless Internet Explorer 8 support is a significant concern.

addEventListener

Also part of DOM2, addEventListener allows you to use event‑binding to achieve much the same click‑handling as we've discussed already. The key difference with event‑binding is that you can use it to capture events on any element type, rather than just interactables such as button.

Following the examples from above, this approach to click‑handling would look like this:

var target = document.getElementById('target');target.addEventListener('click', function () {  console.log('Click detected!');});

As you can see, overall it is a little more verbose than the previous method we've discussed. However, another upside to this method is that addEventListener will allow you to register clicks (and other events) for dynamically generated elements that may not yet have been rendered and loaded onto the page. You achieve this by binding and listening to click events on document, and then use the event to identify the element clicked:

document.body.addEventListener('click', function (e) {  if (e.target.id == 'target') {    console.log('Click detected!');  }});

This comes in incredibly useful ‑ I'm sure you can think of a few situations where you've been stumped by similar issues previously. Of course, if you are working in an environment that already includes jQuery, then it can be used to make this code more straightforward still:

$(document).on('click', '#target', function () {  console.log('Click detected!');});

The key thing to also realise here is that although IE8 doesn't support DOM2, meaning the vanilla addEventListener example won't work, the jQuery version will!

Ultimately, handling click events in JavaScript is no big deal; it's a language purpose‑built for bringing your projects to life and giving them some interactivity, so of course, it can handle clicks easily!