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);
                               ---^^^^^^^^--
```
您需要在将函数作为参数传递之前定义该函数。

或者，您可以保持原样（尽管限于全局范围。）通过取消引用传递给窗口的属性名称。

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

在它逐字地解析为window.onclickfunction之前。

Answer 2

函数是JS中的第一类对象，因此您可以将其视为任何其他变量：

function someF(){}
function func2(argumentFunction)
{
    document.body.addEventListener('click',argumentFunction,false);//<-- use argument name
}
func2(someF);//<-- function someF will be used as callback

参数/变量是对函数对象的引用，这意味着JS并不真正关心函数的名称，它会查看变量引用的内容，在本例中是参数引用一个函数，在别处声明但作为参数传递。纯粹而简单

如何通过参数传递函数名称以用作onclick eventlistener？

2 个答案: