JavaScript events: .target vs .currentTarget

This seemingly comes up for me every six months or so, and I struggle to remember the whys of this. I just thought I’d share this little pointer as a reminder to myself, and hopefully it helps others.

Let’s say you have a clickable element, like a button, and you have some kind of inner element:

  <div>Inner Div</div>

(Why would this come up? Well, for me, I most often have to do this if I want to use flexbox inside of a button, as Firefox doesn’t like display: flex applied directly to a button. You have to insert an inner div and then get on with life. But I digress. Or you may have an SVG icon or image inside of a button.)

Let’s say you write an event handler like so:

const btn = document.querySelector('button');

btn.addEventListener('click', function(e) {

What do you think will happen?

You’ll get the div because, well, that’s what the user has in fact clicked on (even if the handler is written for the button:

> <div>Inner Div</div>

This is a problem if you’re expecting to do something based on the button – like a data attribute.

That is where currentTarget comes in.

const btn = document.querySelector('button');

btn.addEventListener('click', function(e) {

// returns <button><div>Inner Div</div></button>

That will return you the element that is registering the click – in this case, the button.

So, the thing to keep in mind is that if you know that the source of an event doesn’t have children, you can use target. If you don’t know, or you already know that there are children, use currentTarget.

Read MoreLeave a comment

Things I wish I knew when starting with Python

Last year, after getting a promotion, I found myself suddenly in charge of a lot more back end python code. As someone who had almost exclusively worked in the front end (except for some PHP when dealing with Drupal or WordPress) this was new territory for me.

I’ve decided to jot down a few things that I’ve learned that I hope will help folks in a similar position. This is by no means for anyone with even intermediate python knowledge. I’m sure a lot of this will seem super obvious to a lot of folks.

But, if you’re like me and have spent most of your time in the front end, I hope this will orient you a bit.

Read MoreLeave a comment

Looping Video Backgrounds: pointers and pitfalls

I just want to share some of the things that I’ve learned about implementing a ‘video background’ – one of those little videos that you typically find on home pages and landing pages.

Media Boom's Homepage

The Life of Pi movie site

I’m going to deliberately side step the question of “is this a good idea?” and just share some pointers around implementation.

Read More2 Comments