使用javascript添加带有现有函数的onclick侦听器

我有一个现有的javascript函数：

function changeColor(ID){

    try{
        initialize();
    }
    finally{
        changeDesign(ID);
    }

}

我想这样做：

for(var x=0; x<2; x++){
        document.getElementById(x).onclick = "changeColor(" + x +")";
}

---

for（var x=0；x通过DOM API分配事件处理程序不会修改实际的HTML（实际上，浏览器接收的HTML源是只读的）

必须为
.onclick
分配函数，而不是字符串：

for(var x=0; x<2; x++){
    document.getElementById(x).onclick = changeColor;
}

我建议阅读。
通过DOM API分配事件处理程序不会修改实际的HTML（实际上，浏览器接收的HTML源是只读的）

必须为
.onclick
分配函数，而不是字符串：

for(var x=0; x<2; x++){
    document.getElementById(x).onclick = changeColor;
}

我建议阅读。
id
s不应以数字开头。@Jonathanaguin它不起作用…如果我单击tr…什么都没有发生…@FelixKling我也尝试了“document.getElementById（x）。onclick=changeColor（x）“但是当我运行应用程序时，它会执行该功能……我想要的是用户在执行该功能之前先单击tr。这是否令人惊讶？
changeColor（x）
调用该函数
changeColor
，然后返回值将分配给
。onclick
。如果我这样做
var foo=bar（42）；
，然后将执行
bar
，返回值将分配给
foo
。函数调用就是这样工作的（但现在担心的是，当涉及到事件处理程序时，人们似乎会感到困惑；）。@pmark019：请参阅。您不能包含
（0）
，因为您会说：“运行函数并将返回值设置为onclick事件”。
id
s不应以数字开头。@jonathanaguin它不起作用…如果我单击tr…什么都没有发生…@FelixKling我也尝试了“document.getElementById（x）。onclick=changeColor（x）；”但当我运行应用程序时，它会执行该功能…我想要的是用户在执行该功能之前先单击tr。这是否令人惊讶
changeColor（x）
调用函数
changeColor
，然后返回值将分配给
。onclick
。如果我做
var foo=bar（42）
，然后将执行
条
，返回值将分配给
foo
。函数调用就是这样工作的（但现在担心的是，当涉及到事件处理程序时，人们似乎会感到困惑）。@pmark019:请参阅下面的答案。您不能包含
（0）
，因为您会说：“运行函数并将返回值设置为onclick事件”。或者，您可以通过像这样包装内联函数来提供输入参数：
document.getElementById（x）。onclick=function（）{changeColor（x）}。如果您需要仅在事件绑定时作为元素属性无法访问的输入参数，那么这非常有用。对，在这种情况下，您必须使用IIFE来捕获变量
x
：
（函数（x）{document.getElementById（x）.onclick=function（）{changeColor（x）}；}（x））
。或者，您可以通过如下方式包装内联函数来提供输入参数：
document.getElementById（x）.onclick=function（）{changeColor（x）}。如果您需要仅在事件绑定时作为元素属性无法访问的输入参数，那么这非常有用。对，在这种情况下，您必须使用IIFE来捕获变量
x
：
（函数（x）{document.getElementById（x）.onclick=function（）{changeColor（x）}；}（x））。
function changeColor(){
    var ID = this.id; // `this` refers to element the handler is bound to

    try{
        initialize();
    }
    finally{
        changeDesign(ID);
    }

}