Access data-* attributes from the Event object in JavaScript

avatar

Borislav Hadzhiev

Sun Dec 26 20212 min read

banner

Photo by Bry Ulrick

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.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee