Many properties in JavaScript cause an event. One of the most commonly used property is event.target. If you don’t know about it, we have you covered. This article will discuss what is event.target in JavaScript in detail.
The event.target property gives back the HTML element that caused an event so that we can recover any related property or attribute. Events can be clicking a button, pressing a key, etc. In this case, we will aim at a specific element to attain the properties engaged with it.
Furthermore, we will discuss the importance and use cases in the later sections of this article with the help of examples. Without further ado, let’s get started.
See Also: OnBlur Vs OnChange In React: Event Handling In Modern Web Apps
Table of Contents
What Is Event.Target in JavaScript?
The event.target property gives back the HTML element that caused an event so that we can recover any related property or attribute. Events can be clicking a button, pressing a key, etc. In this case, we will aim at a specific element to attain the properties engaged with it.
This section will discuss the event.target in JavaScript thoroughly.
Syntax
The syntax for event.target in JavaScript is :
element.addEventListener(“<event>”, function(event){
console.log(event.target)
})
- You can only get the event.target property if the event of the element can be listened to.
- You can even add an event handler to a particular element. For instance: addEventListener()
- <event> can be any action the user takes.
Let’s understand via an example.
Example
Look at the following code below:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Example of event.target</title>
</head>
<body>
<input type=”text” name=”” id=”enter_characters”>
<script>
let inputBox = document.getElementById(“enter_characters”);
inputBox.addEventListener(“input”, (event) => {
// The event.target property gives back the HTML element that caused an event.
console.log(event.target);
})
</script>
</body>
</html>
In the above example, we have considered the event as input. The event only triggers when we alter the value of the <input> element. Furthermore, when you use the event target property of JS, it will give back the <input> element when the event is triggered.
Output: As soon as we alter the input text, the console logs in to the event target property.
Importance of event.target
The event.target property is significant. For instance:
- We can fetch the element that causes the event.
- We can alter the properties and styles of the mentioned element.
- We can approach the properties and styles of the mentioned HTML element.
See Also: How To Read A JSON File In JavaScript?
event.target Use Cases
This section will thoroughly discuss how to use event.target in JavaScript.
Getting Properties
One of the most widely used cases by developers is in input elements. For instance, if we want to alter the input field’s value, it will cause the input event. Furthermore, we will recover the value with the help of the event.target property. Look at the following code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Getting Properties</title>
</head>
<body>
<!– Input text –>
<input placeholder=”Write anything” name=”name” />
<!– Shows the value of the input field. –>
<p id=”get_input”></p>
<script>
const Strobecorp = document.querySelector(‘input’);
const value = document.getElementById(‘get_input’);
Strobecorp.addEventListener(‘input’, ShowValue);
// Shows the content of the input
function ShowValue(e) {
get_input.innerHTML = e.target.value;
}
</script>
</body>
</html>
Output: You will find an input field to enter any text when you run this code. When you write something in that field, the event.target property and will show the text simultaneously as you write with the help of the paragraph element.
Setting Properties
Another widely used case of this property is that we can alter the properties of a selected element. For instance, look at the following code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Setting Properties</title>
</head>
<body>
<h1 id=”example”>Click to modify </h1>
<script>
const Strobecorp = document.getElementById(‘example’);
Strobecorp.addEventListener(‘click’, AlterColor);
// modifying the CSS property
function AlterColor(e) {
event.target.style.color = “red”;
}
</script>
</body>
</html>
Output: In the above code, the event is the user’s click. As soon as the user clicks on the text, the event.target property will modify the color to red.
Event Targets in Forms
Event targets can be really helpful when you want to create forms. Look at the following code below for creating a form on a webpage:
<form id=”Forms”>
<input type=”text” name=”username” placeholder=”Write your name”>
<input type=”submit” value=”Submit”>
</form>
Now, let’s look at the JS code:
document.querySelector(“#Forms”).addEventListener(“submit”, function(event) {
event.preventDefault();
console.log(event.target.username.value);
});
The above code only activates the function when you submit the form. Afterward, the value is logged with the input to the console. Here, the form is considered the event target from which you can get the value of the form.
Analogy to Understand Event Targets
To understand better, consider it a game of darts where the bullseye is the event target. Whenever you throw a dart(event), it will hit somewhere on the dartboard(target). Therefore, the target in JS works like that only. For instance, when an event occurs, like clicking a button, it lands on a target, like an input field, etc.
Browser Compatibility
The following table shows which browsers support this property:
| Browser | Version |
|---|---|
| Google Chrome | 1 |
| Safari | 1 |
| Mozilla Firefox | 1 |
| Microsoft Edge | 12 |
| Chrome Android | 18 |
| Firefox For Android | 4 |
| Opera Android | 10.1 |
| Safari on iOS | 1 |
| WebView Android | 4.4 |
See Also: What Is The Proper Operator For “Not Equals” In JavaScript?
FAQs
What is a target in JavaScript?
A target in JavaScript is defined as an object or an element that causes an event.
What is Event.Target?
The event.target property gives back the HTML element that caused an event so that we can recover any related property or attribute.
How to remove an event target in JavaScript?
You can use the removeEventListener() method to remove the event target in JS.
What is event currentTarget in JavaScript?
The currentTarget property in JS gives back the element whose event listener caused an event.
See Also: What Is Closure In JavaScript? Overview & Examples
Hi, I’m Geoff. I design. I develop. I do lots of things in between. What that really boils down to is that I make websites.
