添加一個動態命名的事件偵聽器

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);