javascript - 如何通过参数传递函数名称以用作 onclick 事件监听器？

Question

我正在编写一个 chrome 扩展程序，我在其中向页面添加一个按钮，然后向其添加一个 onclick 事件。因为我想添加更多按钮，所以我想让它动态化..

addAutoModButton('Auto-Moderate', 'moderate');

function addAutoModButton(name, onclickfunction)    {
    ...
    ...
    //creating a button and adding it
    var modbtn = document.createElement("input");
    modbtn.setAttribute('type','button');
    modbtn.setAttribute('value',name);
    title_header.appendChild(modbtn);

    modbtn.addEventListener("click", window["onclickfunction"], false);
    // thats what is not working

}

function moderate() {
    //do some stuff
}

建议？

Answer 1

• 您需要使用您定义的参数。

  function addAutoModButton(name, onclickfunction)    {
    ...
    modbtn.addEventListener("click", onclickfunction, false);
                                 ----^^^^^^^^^^^^^^^--
  

• 传递函数，而不是它的名称。

  addAutoModButton('Auto-Moderate', moderate);
                                 ---^^^^^^^^--
  

  不过，您需要先定义该函数，然后再将其作为参数传递。

---

或者，您可以保持原样(但仅限于全局范围。)通过取消引用传递给 window 的属性名称。

modbtn.addEventListener("click", window[onclickfunction], false);
                                     ---^^^^^^^^^^^^^^^---

在静态解析为 window.onclickfunction 之前，字面上。