动态更改 HTML DOM 事件

Question

我正在尝试动态更改元素的 onClick 事件，并且有类似以下内容的内容：

for (var i = 1; i < 5; i++)
{
    getElementById('element' + i).onclick = function() { existingFunction(i); return false; };
}

除了每次调用时传递给 'existingFunction()' 的参数是 i=4 的最终值这一事实之外，一切似乎都工作正常。有没有一种方法可以将函数绑定到 onclick，该函数在绑定时使用 i 的值，而不是目前看起来正在执行的操作并在 for 循环中引用原始 i 。

还有一种方法可以执行相同的绑定，而不必每次都创建匿名函数？这样我就可以出于性能原因在每个 onclick 中直接引用“existingFunction”？

干杯，伙计们， 勇

Answer 1

更改

for (var i = 1; i < 5; i++)
{
    getElementById('element' + i).onclick = function() { existingFunction(i); return false; };
}

为

for (var i = 1; i < 5; i++)
{
    getElementById('element' + i).onclick = createOneHandler(i);
}

function createOneHandler(number){  
    return function() {  
        existingFunction(number); 
    }  
}

，它应该可以正常工作。

工作演示

这里给出了很好的解释

JavaScript，关闭 grok 的时间

Answer 2

对于 i 始终为 4，您有范围界定问题，我建议阅读 这个。范围界定是一个非常重要的概念，因此您最好确保了解正在发生的事情。

更好的代码是

for (var i = 1; i < 5; i++)
{
    getElementById('element' + i).onclick = existingFunction;
}

onclick 会传递一个带有参数的事件，这样您就可以知道单击了哪个元素
即

function existingFunction(event){
  // DO something here
}

您可以在那里阅读有关事件的更多信息。 IE 确实具有与其他浏览器完全相同的事件模型，因此您必须处理它。

最后一点，我建议你使用 JS 框架（Jquery、ExtJS、DOJO、Prototype...），因为它会简化你的任务

Answer 3

您发布的代码应该按您预期的方式工作，i=4 的问题在其他地方。编辑：这是错误的，rageZ 关于范围问题是正确的。

关于另一个问题：你所能做的就是用 BTW 来减轻冗长

var f = function (i) { return function () { existingFunction(i); return false; } }
for (...) { document.getElementById(...).onclick = f(i); }

，你应该使用 jQuery 之类的东西来进行 DOM 操作（简洁的语法），也许还可以使用 Zeta (http://codex.sigpipe.cz/zeta/) 用于函数组合

var f = compose(false_, existingFunction);
for (...) { $(...).click(f(i));

Answer 4

万岁！又是闭环了！请参阅422784、643542，1552941 等人进行更多讨论。

有没有一种方法可以执行相同的绑定而不必每次都创建匿名函数？

是的，在 ECMAScript 第五版中，您会得到 function.bind：

for (var i = 1; i < 5; i++)
    document.getElementById('element'+i).onclick= existingFunction.bind(window, i);

同时，由于浏览器尚未普遍支持它，您可以对 bind 的替代实现进行猴子修补（请参阅此评论的底部是由匿名函数构建的这样一个）作为后备。

或者，为每个元素分配相同的事件处理函数，然后让它查看 this.id 以了解它是哪个元素编号。