How to pass JavaScript custom data attributes to event listeners

I’ll show you how to pass values ​​to event listeners using custom data attributes in JavaScript.

I would like to know how to pass custom data attributes to event listeners. 
What should I do?

You can use custom data attributes to set data on HTML elements and retrieve their values ​​from event listeners.

What are custom data attributes?

Custom data attributes are a feature that allows you to add arbitrary information to HTML elements.

For example, you can create a custom data attribute by adding an attribute in the format “data-*” to an HTML element as shown below.

<button data-info="hello world">Click me</button>

In the above example, a custom data attribute called “data-info” is added to the button element and its value is set to “hello world”.

To retrieve custom data attributes in JavaScript, use the element’s “dataset” property. The “dataset” property allows you to retrieve the “data-*” attributes set on an element as a JavaScript object.

For example, to get the value of the “data-info” attribute from the above element, do the following:

const button = document.querySelector('button');
const info = button.dataset.info;
console.log(info); // output: "hello world"

Custom data attributes are a useful way to add arbitrary information to HTML elements.

When using custom data attributes, it is also important to note that the hyphen-separated names must be converted to camel case when retrieving the attribute names using the “dataset” property.

Explanation using a sample program

We will use the sample program below to explain how to pass custom data attributes to event listeners.

<button id="my-button" data-info="hello world">Click me</button>
<script>
  const button = document.getElementById('my-button');
  button.addEventListener('click', handleClick);

  function handleClick(event) {
    const info = event.target.dataset.info;
    console.log(info); // output : "hello world"
  }
</script>

In the above example, a custom data attribute called “data-info” is added to the button element with the ID “my-button”. Next, use the “addEventListener” method to register the “handleClick” function for the “click” event.

In the “handleClick” function, we get the clicked element from the event object and get the value of the “data-info” attribute from that element. Finally, the obtained value is output to the console.

In this way, to pass a custom data attribute to an event listener, all you have to do is get the target element from the event object’s “target” property and get the value of the custom data attribute from the “dataset” property of that element.

However, if you have multiple or complex values ​​to pass to an event listener, you will need to use a more advanced method. For example, you can pass values ​​using JavaScript objects rather than custom data attributes. However, if you want to pass basic values, you can use custom data attributes.

summary

We explained how to pass values ​​to event listeners using custom data attributes.

Now you know how to pass values ​​to event listeners using custom data attributes!

Custom data attributes allow you to easily set information related to HTML elements and access it with JavaScript code. 
However, custom data attributes are not part of the HTML specification and may cause unintended behavior, so be careful to use them appropriately.