Question

我正在尝试创建一个可配置的按钮栏，并为每个按钮添加onclick个事件侦听器。我需要动态分配函数，使用按钮的data-function属性提供的名称。

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

脚本：

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() { … }

那么，应该在?????中进行哪些操作，以便为每个按钮的onclick事件添加正确的函数？

我想要没有jQuery。

Answer 1

假设func1和func2是全局函数，

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

如果他们不是全球性的，你应该这样声明：

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

你可以使用邪恶的eval代替，但最好避免使用它（速度较慢且易于注入）：

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

添加动态命名的事件侦听器

1 个答案: