Must-Know e.target in JavaScript Explained
Tags: javascript, webdev, beginners, programming
Published: 2022-08-15 11:54:26

---
canonical_url: https://softauthor.com/e-target-in-javascript/
---

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](https://softauthor.com/e-target-in-javascript/#get-clicked-html-element-uaasing-e-target)
- [Get Child Element Using e.target](https://softauthor.com/e-target-in-javascript/#get-clicked-child-element-using-e-target)
- [Get Parent Element Using e.target](https://softauthor.com/e-target-in-javascript/#get-clicked-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

1. **Define** an HTML **Button** Element

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

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

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

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

```JavaScript
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

```JavaScript
button.addEventListener("click", buttonPressed);
```

Declare the callback function **buttonPressed()**.

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

3. 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.

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

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

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

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

![alt text](https://softauthor.com/wp-content/uploads/2022/07/Get-Clicked-HTML-Element-Using-e.target-JavaScript.gif)

###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.

```HTML
<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**.

```JavaScript
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.

![alt text](https://softauthor.com/wp-content/uploads/2022/07/Get-Clicked-Child-Element-Using-e.target-JavaScript.gif)

###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**.

```HTML
<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**.

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

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

button.addEventListener('click', buttonPressed);
```

![alt text](https://softauthor.com/wp-content/uploads/2022/07/Get-Clicked-Parent-Element-Using-e.target-JavaScript.gif)

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.