Altcademy - a Forbes magazine logo Best Coding Bootcamp 2023

What is in JavaScript

Getting to Know 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 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

In JavaScript, e typically stands for event, and target refers to the object where the event was dispatched or triggered. Thus, 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) {

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

Why is Useful?

At this point, you might be wondering why 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. helps us capture these events on the exact elements where they occur, allowing us to respond appropriately. For example, we can use 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) { = 'green';

In this script, 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) {
  alert(`Form Submitted: ${}`);

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

More About

There's a common confusion between and e.currentTarget in JavaScript. To clarify, while 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('currentTarget:', e.currentTarget);

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

If you click on the child element, 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, 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, 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 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?