Data target in javascript

What is event.target in JavaScript?

Many candidates are rejected or down-leveled in technical interviews due to poor performance in behavioral or cultural fit interviews. Ace your interviews with this free course, where you will practice confidently tackling behavioral interview questions.

When an event is fired, the element that fires the event is known as the emitter. This element is what we call the target. So, the target property of that event object refers to the event emitter.

Syntax

The target property can only be obtained if the event of an element is being listened to.

element.addEventListener("input", function(event) 
//event.target is now accessible
 
console.log(event.target)
>)

In the code above, the element’s input event is being listened to, which makes event.target accessible.

Importance of event.target

It is necessary to have the target property when an event is fired. We can do the following with the target property of the event.

• Get the element that fired the event.
• Access the properties of the element .
• Modify some properties of the element , such as the CSS, the attributes, etc.

Code

The code below shows how an input element that fires the oninput event is listened to and event.target is retrieved. The code also shows some capabilities of having event.target at our fingertips.

Источник

What are the data-target and data-toggle attributes useful for?

How to Speed up Your WordPress Website

I need to know, what are these two date-target and date-toggle attributes if similar in HTML?

2 answers

About attributes data-*

HTML5 was created with the extensibility of data that needs to be associated with a given element but does not necessarily have a definite meaning.

data-* faults, commonly used in conjunction with the framework Bootstrap , allow you to store extra information in standard and semantic HTML elements, without the needs of hacks like classList , nonstandard attributes, extra properties in the DOM, or the obsolete setUserData method.

See an example below of use in the tag:

See that extra attributes have been created for the element in question and added multiple values to it, without the need to do anything strange and / or non-semantic.

Recommended and interesting reading on the subject in this other response .

Data Toggle

data-toggle is an HTML5 data attribute that automatically links the element to the corresponding type .

For example, if you have a dropdown , such as in this other answer :

You can see that using data-toggle is reaffirmed, that the element in question is a dropdown .

Some other elements that are commonly used :

data-toggle="modal" data-toggle="collapse" data-toggle="dropdown" data-toggle="tab" 

Data Target

The data-target usually used in Bootstrap is next to modals, but not only. By its own name, it is understood that it will reference your target, . This attribute must contain a CSS selector that points to the HTML element that will participate in the event.

See an example using a modal:

 Launch demo modal  
 
 
 
× 
Modal title
 
 
.
 
Close Save changes 
 
 
 
 

When you click the button (and if everything is correct), it will open a modal box with the id that is equal to myModal . Without much effort you will be using through data-target plus one of the pre-developed JavaScript components.

Addendum

You can see the difference when comparing the above code, which will open a modal with id myModal , using the data-* attributes and having to do the manual encoding, see below:

And then in the script tag, I would have to code something similar to this to open the modal:

We have questions answered on this subject in our Big Brother SO, more specifically here and here . You also have MDN this article, from which I took most of the information.

Note on date attributes — *:

var article = document.getElementById('electriccars'); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "cars" 

var button = document.getElementById('your-button-id'); var cmd = button.getAttribute('data-cmd'); var yourNewCmd); button.setAttribute('data-id', yourNewId); 

Custom data attributes are intended to store private custom data for the page or application, for which there are no more attributes or appropriate elements .

That said, you can understand that the data-* attribute is intended to store small amounts of invisible data that is not crucial to the user and may become visible later . If the data is crucial to the user, it should be presented visibly and more easily. Remembering also that semantically speaking, there are more appropriate elements for cases like these.

And while it’s possible to manipulate data with JavaScript, is not recommended .

Источник

Data target in javascript

Last updated: Jan 11, 2023
Reading time · 2 min

# Access data- * attributes from the Event object

Use the target.dataset property to access data attributes from the event object.

The dataset property provides read and write access to the custom data attributes of the element.

The property returns a Map of strings that can be converted to an object.

Here is the HTML for the example.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body> button id="btn" data-site="bobbyhadz.com">Clickbutton> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const btn = document.getElementById('btn'); btn.addEventListener('click', event =>  // 👇️ DOMStringMap console.log(event.target.dataset); // 👇️ "bobbyhadz.com" console.log(event.target.getAttribute('data-site')); >); 

We attached a click event listener to a button.

When the button is clicked, the callback function gets passed an event, on which we can access the button element via the target property.

We accessed the dataset property on the event.target object to get a Map of strings that contains the data attributes of the button element.

Copied! 
const btn = document.getElementById('btn'); btn.addEventListener('click', event =>  // 👇️ console.log(event.target.dataset); // 👇️ "bobbyhadz.com" console.log(event.target.getAttribute('data-site')); >); 

The property returns a read-only Map of strings containing the custom data attributes of the element.

# Updating a data- * property

The dataset property itself is read-only. If you need to update a specific property, you must access the nested property.

Copied! 
console.log(el.dataset.id); // 👉️ "example" el.dataset.id = 'updated id'; console.log(el.dataset.id); // 👉️ "updated id" 

To update the data-site attribute, access the site property on the dataset object and assign a new value to it.

Copied! 
const btn = document.getElementById('btn'); btn.addEventListener('click', event =>  console.log(btn.dataset.site); // 👉️ "bobbyhadz.com" btn.dataset.site = 'google.com'; console.log(btn.dataset.site); // 👉️ "google.com" >); 

# Converting the DOM string Map to a JS object

If you need to convert the DOM string Map to a native JavaScript object, you can use the spread syntax (. ).

Copied! 
const btn = document.getElementById('btn'); btn.addEventListener('click', event =>  const map = event.target.dataset; const obj = . map>; console.log(obj); // 👉️ >); 

# Access data- * attributes from the Event using getAttribute

An alternative approach, which allows you to get any attribute on the DOM element is to call the getAttribute() method on the specific element.

Copied! 
const btn = document.getElementById('btn'); btn.addEventListener('click', event =>  const attr = event.target.getAttribute('data-site'); console.log(attr); // 👉️ "bobbyhadz.com" console.log(event.target.getAttribute('id')); // 👉️ "btn" >); 

Notice that when passing an attribute name to the getAttribute method, we have to provide the complete name, including the data- part.

As opposed to when accessing a property on the dataset map, where the data- part is excluded.

If the attribute is not found on the DOM element the getAttribute method will return null or an empty string.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

target Event Property

Get the name of the element where the event occurred:

Description

The target property returns the element where the event occured.

The target property is read-only.

The target property returns the element on which the event occurred, opposed to the currentTarget property, which returns the element whose event listener triggered the event.

See Also:

Syntax

Technical Details

More examples

Example

Get the element that triggered the event:

Example

Get the name of the element that triggered the event:

Browser Support

event.target is a DOM Level 2 (2001) feature.

It is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник