Must-Know e.target in JavaScript Explained

When you attach an event to an HTML Element, it will return the event object when the event is triggered.

The triggered event could be a click, mouse over, mouse down, etc.

The target property of the event object (e) will give the current HTML Element that the event is triggered on.

Let see that in action.

• Get Current HTML Element Using e.target
• Get Child Element Using e.target
• Get Parent Element Using e.target

Get Clicked HTML Element Using e.target

Let’s see how to access an HTML Element when the event that it’s attached to is triggered.

1. Create an HTML Element
2. Attach an Event to it
3. Trigger an event
4. Capture the returned event object inside the event callback function

5. Get the current HTML Element by accessing the target property of the event object

6. Define an HTML Button Element
   

<button id="button">Button</button>

Create a DOM reference to the button element using its ID attribute.

const button = document.getElementById('button');

1. Attach an event to the button element by calling addEventListener() method on the button object.

button.addEventListener();

The addEventListener() takes two main arguments which are:

• click → the event name
• buttonPressed → the callback function which will be invoked when the click event is triggered

button.addEventListener("click", buttonPressed);

Declare the callback function buttonPressed().

const buttonPressed = () => {
  console.log("I'll be called every time when a button is pressed")
}

1. The buttonPressed() function will be called every time the click event is triggered on the button.

Capture / Get Clicked Element Inside The Callback Function

Every time a user presses the button, it will return an HTML Element as an event object.

1. The returned event object will be passed into the buttonPressed() callback function as a parameter called e.

const buttonPressed = (e) => {
  console.log(e); //short form of event
}

1. Use the target property of the event object to get the currently clicked HTML Element, which is button in this case.

const buttonPressed = (e) => {
  console.log(e.target); //<button id="open-modal">Open Modal Window</button>
}

Get Clicked Child Element Using e.target

Learn how to get the child element using e.target when a parent element of the event is triggered.

The sample wrapper div with an id button-group has four button elements inside.

<div id="button-group">
   <button>Button 1</button>
   <button>Button 2</button>
   <button>Button 3</button>
   <button>Button 4</button>
</div>

Attach a click event to the wrapper div instead of each button.

const buttonGroup = document.getElementById("button-group");

const buttonGroupPressed = (e) => {
    console.log(e.target); // Get any clicked element inside button-group wrapper div
}

buttonGroup.addEventListener('click', buttonGroupPressed);

e.target will return any currently clicked HTML element, which can be either the parent (#button-group) or child elements (buttons inside).

The parent element will be referred to an element that has a click event attached to it.

In this case the wrapper div (div#button-group).

In contrast to currentTarget property of the event object (e.currentTarget) which will only return the parent element regardless whether the parent or child element is clicked.

Get Clicked Parent Element Using e.target

Learn how to get the parent element when a child element that has an attached event is triggered.

The wrapper div element has one child element which is button.

<div id="button-group">
   <button id="button">Button</button>
</div>

Attach a click event to the button and when its clicked get its parent element using parentNode property of the e.target.

const button = document.getElementById("button");

const buttonPressed = (e) => {
    console.log(e.target.parentNode); // <div id="button-group">...</div>
}

button.addEventListener('click', buttonPressed);

Using e.target, you can get currently clicked HTML elements when an event that has attached to it is triggered for further manipulation such as getting or setting one of the attributes of an HTML element.