Question

我遇到动态创建的Javascript事件处理函数的问题。

在我的HTML中，我有以下内容：

<input id="nvctrlfont1" type=number min=18 max=144 step=1 value=36 maxlength="3" size="8">
<input id="nvctrlfont2" class="color" value="000000" style="background-color:black;width:70px;">
<input id="nvctrlfont4" class="color" value="000000" style="background-color:black;width:70px;">

.....

类颜色只是一个javascript颜色选择器。

元素ID具有1,2,4 ......等布尔值。也就是说JS函数接收一个布尔值，用于隐藏或显示HTML输入元素。对于隐藏的元素，不分配任何事件，对于未隐藏的事件，将分配事件。

Events函数将驻留在nvFontFuncs中。

我似乎无法解决的问题：

当函数赋值发生在nvEL.onchange上时，它似乎每次都用相同的函数替换它。

例如，假设布尔nvFontBool带有“6”，则应该启用输入元素nvcontrolfont2和nvcontrolfont4，并且nvFontFuncs中的函数nvctrlfont2和4分别相应地分配给onchange事件。 / p>

然而，nvctrlfont4函数最终被分配给BOTH元素会发生什么。

换句话说，无论哪个元素设置了onchange事件，点击它时都会调用分配的最后一个元素。在我的例子中，无论是否更改INPUT nvctrlfont2或nvctrlfont4元素，都会调用nvctrlfont4（）。

例如，如果我将nvFontBool参数更改为“7”，从而启用所有三个输入元素。然后无论改变哪一个，它都会调用nvctrlfont4（）（恰好是循环中指定的最后一个）。

我尝试使用addEvent和setAttributes，结果相同。它作为函数的onchange赋值在绑定时是静态的。因此，最“最近”的一个绑定最终会替换所有元素的先前绑定。

帮助？

继承人JS。

var nvFontFuncs = {
  nvctrlfont1: function () { alert('Function 1'); },
  nvctrlfont2: function () { alert('Function 2'); },
  nvctrlfont4: function () { alert('Function 4'); }
};

这是功能

function nvSetFontCtrls(nvFontBool)
{
    var nvEL;
    var nvName="nvctrlfont";
    var nvTemp;

    nvFg=1;
    while(nvFontBool != 0) {
        //alert("FontBool:"+nvFontBool);
        nvTemp=nvName+nvFg.toString();
       // nvTemp="func"+nvFg.toString(); 
        nvEL=document.getElementById(nvTemp);
        if(nvFontBool & nvFg) {
             nvEL.style.display="block";
             nvEL.onchange=function() { nvFontFuncs[nvTemp](); }
        }
        else {
            nvEL.style.display="none";        
        }
        nvFontBool=nvFontBool&(~nvFg); //alert("nvfontbool:"+dechex(~nvFg));
        nvFg = nvFg << 1; 
    }
}

Answer 1

您可以指定以下功能：

function() { nvFontFuncs[nvTemp](); }

nvTemp是nvSetFontCtrls的本地范围内的变量。因此，当调用处理程序时，当然，nvTemp具有它设置的最后一个值。

你可以做这样的事情：

nvEL.onchange=(function(nvTemp) {
  return function() { nvFontFuncs[nvTemp](); }
}(nvTemp));

Answer 2

问题是，nvTemp被设置为循环的最后一个值，所以一旦调用了handler函数，nvTemp就会有'nvctrlfont4'。

如果使用nvEL.onchange = nvFontFuncs [nvTemp]赋值，问题将解决

Javascript动态事件分配表现奇怪

2 个答案: