Getting to Know e.target in JavaScript

Imagine yourself at a large party where several conversations are happening at once. You're in the middle of one discussion when you overhear someone mention your favorite book in another conversation nearby. In that moment, your attention shifts from your current conversation to the source of the comment about your favorite book.

This is somewhat analogous to how e.target works in JavaScript. It helps us identify the exact source of an event, much like how our ears helped us pinpoint the origin of the book conversation at the party.

What is e.target?

In JavaScript, e typically stands for event, and target refers to the object where the event was dispatched or triggered. Thus, e.target is a property of an event object that tells us exactly where an event, like a click or a keystroke, happened.

button.addEventListener('click', function(e) {
  console.log(e.target);
});

In this script, e.target will return the button object if it is clicked.

Why is e.target Useful?

At this point, you might be wondering why e.target is so important. Let's go back to our party analogy for a moment.

Just as you wouldn't want to miss an interesting conversation at a party, you also wouldn't want to miss an important event happening on your webpage. These events could be anything from clicks, mouse movements, key presses, or form submissions.

e.target helps us capture these events on the exact elements where they occur, allowing us to respond appropriately. For example, we can use e.target to change the color of a button after it's clicked or display a message when a form is submitted.

Dive into Code Examples

To better understand, let's go through some code examples.

Changing Button Color After Click

let button = document.querySelector('button');

button.addEventListener('click', function(e) {
  e.target.style.backgroundColor = 'green';
});

In this script, e.target refers to the button that was clicked. After the click event, the button's background color changes to green.

Displaying a Message After Form Submission

let form = document.querySelector('form');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  alert(`Form Submitted: ${e.target.method}`);
});

Here, e.target refers to the form that was submitted. After the submit event, an alert message displays the method of the form submission.

More About e.target

There's a common confusion between e.target and e.currentTarget in JavaScript. To clarify, while e.target points to the original element where the event was fired, e.currentTarget always refers to the element to which the event handler has been attached.

Let's illustrate this with a code example:

let parent = document.querySelector('.parent');
let child = document.querySelector('.child');

parent.addEventListener('click', function(e) {
  console.log('target:', e.target);
  console.log('currentTarget:', e.currentTarget);
});

child.addEventListener('click', function(e) {
  e.stopPropagation();
  console.log('target:', e.target);
  console.log('currentTarget:', e.currentTarget);
});

If you click on the child element, e.target will return the child element, and e.currentTarget will return the same since both the event fired and the handler are on the child element. However, if you click on the parent, e.target will return the parent element, and e.currentTarget will also return the parent as the event handler is attached to the parent.

Wrapping Up

In JavaScript, e.target acts like a spotlight, focusing on the element where an event was triggered, thus allowing us to interact with our users in a more dynamic and responsive way. It's like being at a party and being able to tune into different conversations happening around you.

As you continue your journey learning JavaScript, remember that e.target is just one of the many powerful tools you have at your disposal. So don't stop here. Keep exploring, keep coding. Who knows what exciting conversations you'll stumble upon next?