Access data-* attributes from the Event object in JavaScript

avatar

Borislav Hadzhiev

Last updated: Dec 26, 2021

banner

Photo from Unsplash

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 which can be converted to an object.

Here is the html for the example.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <button id="btn" data-bar="foo">Click</button> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const btn = document.getElementById('btn'); btn.addEventListener('click', event => { // 👇️ {bar: 'foo'} console.log(event.target.dataset); // 👇️ "foo" console.log(event.target.getAttribute('data-bar')); });

We attached a click event listener to a button.

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

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

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

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

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

To update the data-id attribute, we accessed the id property on the dataset object and assigned a new value to it.

index.js
const btn = document.getElementById('btn'); btn.addEventListener('click', event => { console.log(btn.dataset.bar); // 👉️ "foo" btn.dataset.bar = 'BAZ'; console.log(btn.dataset.bar); // 👉️ "BAZ" });

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

index.js
const btn = document.getElementById('btn'); btn.addEventListener('click', event => { const map = event.target.dataset; const obj = {...map}; console.log(obj); // 👉️ {bar: 'foo'} });

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

index.js
const btn = document.getElementById('btn'); btn.addEventListener('click', event => { const attr = event.target.getAttribute('data-bar'); console.log(attr); // 👉️ "foo" 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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.