DEV Community

Cover image for Must-Know e.target in JavaScript Explained
Raja Tamil
Raja Tamil

Posted on • Originally published at softauthor.com

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 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>
Enter fullscreen mode Exit fullscreen mode

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

const button = document.getElementById('button');
Enter fullscreen mode Exit fullscreen mode
  1. Attach an event to the button element by calling addEventListener() method on the button object.
button.addEventListener();
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Declare the callback function buttonPressed().

const buttonPressed = () => {
  console.log("I'll be called every time when a button is pressed")
}
Enter fullscreen mode Exit fullscreen mode
  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
}
Enter fullscreen mode Exit fullscreen mode
  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>
}
Enter fullscreen mode Exit fullscreen mode

alt text

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>
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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.

alt text

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>
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

alt text

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.

Top comments (0)