Creating an event listener with a dynamic name

Question

Creating an event listener with a dynamic name

I'm in the process of developing a customizable button bar where I need to attach onclick event listeners to each button dynamically. The functions to be assigned should have names provided by the button's data-function attribute.

…
<div class="button-set">
  <span class="function-button" data-function="func1"></span>
  <span class="function-button" data-function="func2"></span>
</div>
…

Here's the script:

window.onload = function (){
  var btns = document.getElementsByClassName("function-button");
  for (var i=0; i < btns.length; i++) {
    var b = btns[i];
    b.addEventListener("click", ?????, false);
  }
}

function func1() { … }
function func2() { … }

What should be added in the placeholder "????" so that the correct functions are assigned to the onclick event for each button?

I prefer achieving this without using jQuery.

javascript dynamic onclicklistener

Answer 1

Answer №1

Suppose func1 and func2 are global functions,

b.addEventListener("click", window[b.getAttributte('data-function')], false);
// Alternatively, in newer browsers:
b.addEventListener("click", window[b.dataset.function], false);

If they are not global, you need to define them like this:

var functions = {
    func1: function () { … },
    func2: function () { … }
}
b.addEventListener("click", functions[b.dataset.function], false);

You could resort to using eval, but it is best to avoid it (slower and susceptible to injection):

b.addEventListener("click", eval(b.dataset.function), false);

Answer 2

Suppose func1 and func2 are global functions,

b.addEventListener("click", window[b.getAttributte('data-function')], false);
// Alternatively, in newer browsers:
b.addEventListener("click", window[b.dataset.function], false);

If they are not global, you need to define them like this:

var functions = {
    func1: function () { … },
    func2: function () { … }
}
b.addEventListener("click", functions[b.dataset.function], false);

You could resort to using eval, but it is best to avoid it (slower and susceptible to injection):

b.addEventListener("click", eval(b.dataset.function), false);

Creating an event listener with a dynamic name

Answer №1

Similar questions

Can a JavaScript string be converted into a date format for insertion into a SQL database?

When attempting to create a build using npm run, an error with code ELIFECYCLE occurred despite successfully installing

What is the reason behind the necessity of using setTimeout with a delay of at least 50ms for JS .focus()

Guide on enabling users to input slide number and URL address to load content using Ajax

Troubleshooting JavaScript in Internet Explorer 9

Is it possible to generate an HTML file without MathML by rendering MathJax/MathML at compilation/preprocessing time?

Convert the date and time of "2018-03-31T05:37:57.000Z" to a

React: Selecting Component Name Based on Provided Property

Implementing a Class Addition Functionality Upon Button Click in AngularJS

Using Javascript to retrieve the selected value from a dropdown menu does not return any results

Implement AJAX in order to circumvent fees from Google Maps and display maps exclusively upon user interaction by clicking a designated button

Dynamic background image that fills the entire webpage, adjusts to different screen sizes, and changes randomly

Exploring the process of implementing functions on buttons in Three.js

Issue with material table not showing data

The present URL of Next.js version 13

Using jQuery to extract contact information from Google: A step-by-step guide

The Vue 3 router seems to be malfunctioning and I am quite puzzled as to why

Unable to retrieve file path from image selection in JavaScript by clicking on a button

Vercel and Firebase Realtime Database causing snapshot.val() to return null during build deployment

React hooks - Issue with updating state properties within sidebar display