Fat Pixel Blog

The event currenttarget revelation

Confession time (again)... It took me until februari 2022 to learn about event.currentTarget. Yes, this is another case of how did't i know this?!?

The problem

When you write some javascript and you are listening for clicks on an element, you'll probably do something like:

function handleclick(event) {
		console.log('you clicked, whoo!');
		console.log(event.target);
}
var button = document.querySelector('.clickme');
button.addEventListener('click', handleclick, false);

That's nice. When you click, it logs the target. But if the link is looking something like this:

<button class="clickme"><span>Click me!</span><svg>Some icon</svg></button>

The handleclick function returns the span, or the svg, or the button. Depending on where you clicked.

So in the past I was always checking if the element I wanted to work with was clicked in my clickhandler functions. For example something like:

function handleclick(event) {
	button = event.target;
	// Check if the target doesn't cointain the clickme class
	if(event.target.classList.contains('clickme') == false) {
		button = event.target.closest('.clickme');
	}
	console.log('you clicked, whoo!');
	console.log(button);
}

There are a few problems with this:

The solution

Little did I know there is a very, very easy solution to this: event.currentTarget (rainbows, unicorns, soft harp noises)

So let's simplify our handler to the following:

function handleclick(event) {
	button = event.currentTarget;
	console.log('you clicked, whoo!');
	console.log(button);
}

In this function event.currentTarget holds the value of the element the event handler is attached to. So it doesn't matter if you click on the button itself, or the child elements like the label or icon. It will return the button.

Of course MDN has a great resource on currentTarget, so if you're not familiar (like me): check it out!