What is the Event Target in Javascript?

What Is the Event Target in Javascript?

The change in the state of an object is known as an event. It refers to anything that happens in the Document Object Model. Events range from loading a page, pressing a key, and clicking a button, to moving to another window. They can either be triggered automatically or by user actions.

Events also have properties that demonstrate more details about them. In this article, we will learn about the event property in Javascript.

The event.target property returns the HTML element that triggered an event so we can retrieve any associated property or attribute. Targeting anything implies aiming at it; in this case, we are aiming at a particular element to gain access to the properties connected to it.

Syntax

• It is only possible to obtain the event.target property if the element's event is being listened to.
• addEventListener() adds an event handler to the specified element.
• <event> can be a click, mouseover, focus, submit, etc.

Let's use the example below to understand the syntax.

Example

• The getElementById() method returns an element object whose id property matches the desired string. It retrieves the element object with the id inp_text.
• Here, the event is input. The input event fires when the value of an <input> element has been changed.
• The event target Javascript property in returns the element input on which the event occurs.

OUTPUT : When we attempt to modify the input text, the HTML input element gets console logged.

Importance of event.target

With the help of the event target javascript property, we can perform the following actions:

• We can get the element that triggers the event.
• We can get access to the element's properties and attributes.
• We can modify some properties and styles of the HTML element.

event.target Use Cases

Getting properties

The most common use case is in input elements. For example, if we modify the content of the input field, it triggers the input event. We can retrieve the value of the input by using the event.target.value property.

OUTPUT :

Setting Properties

We can also use the event target Javascript property to modify the properties of an element.

• The event.target.style property modifies the CSS properties of an element.
• We can change the color of the heading by clicking on it.

OUTPUT:

Browser Compatibility

The following modern browsers support the event target Javascript property :