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 clear and easy to understand, and the onclick property did work in Internet Explorer 8. Its limitation is that assigning a new function replaces any handler already stored in that one property. IE8's event‑model gap was addEventListener, which it replaced with attachEvent. Inline onclick also worked, although I would not usually recommend mixing behaviour into the markup:

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

That inline route was not required merely for Internet Explorer 8 support; it is shown only as another historical way the event could be assigned.

addEventListener

Also part of DOM2, addEventListener registers a listener without replacing another listener already registered for the same event. It can listen on any EventTarget; onclick properties are not limited to native controls either.

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, addEventListener does not attach itself to elements created later. The technique below works because a listener on the existing body receives bubbled clicks from present and future descendants, then walks up from the actual event target to the intended control:

document.body.addEventListener('click', function (e) {  var target = e.target;  while (target && target !== document.body && target.id !== 'target') {    target = target.parentNode;  }  if (target && 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!