Javascript:动态生成处理程序

Question

我正在用 Javascript 编程。

我需要为 onclick 事件动态生成事件处理程序。

上面的代码:

for (var i = 1; i < CurrValue; i++) {
    getId('btnReadRFIDTag_' + i).onclick = function () 
    {
        ReadRFIDTag(getId('txtCode_' + i));
    };

}

问题显然是在运行时 i 变量获取最新值而不是正确值。

但是我无法解决这个问题，因为处理程序不允许函数的参数。

我该如何解决这个问题？

谢谢。

祝你有美好的一天。

Answer 1

三个选项:

使用构建器函数

通常的方法是为处理程序设置一个构建器函数:

for (var i = 1; i < CurrValue; i++) {
    getId('btnReadRFIDTag_' + i).onclick = buildHandler(i);
}
function buildHandler(index) {
    return function() {
        ReadRFIDTag(getId('txtCode_' + index));
    };
}

buildHandler 构建的函数关闭 index 调用 buildHandler 的参数，而不是 i，所以它看到了正确的值。

使用ES5的Function#bind

如果你可以依赖 ES5(或者你包含一个 ES5 shim，因为这是一个 shimmable 特性)，你可以使用 Function#bind 来实现:

// Using Function#bind (option 1)
for (var i = 1; i < CurrValue; i++) {
    var elm = getId('btnReadRFIDTag_' + i);
    elm.onclick = function(index) {
        ReadRFIDTag(getId('txtCode_' + index));
    }.bind(elm, i);
}

这样使用，它会创建不必要的额外功能，所以你也可以这样使用它:

// Using Function#bind (option 2)
for (var i = 1; i < CurrValue; i++) {
    var elm = getId('btnReadRFIDTag_' + i);
    elm.onclick = myHandler.bind(elm, i);
}

function myHandler(index) {
    ReadRFIDTag(getId('txtCode_' + index));
}

使用事件委托(delegate)

与其在每个按钮上放置一个处理程序，如果它们都在一个容器中(当然，最终，它们是，即使它只是 document.body)，您可以将该容器上的处理程序，然后使用 event.target 找出单击了哪个按钮。我不会用老式的 onclick 这样做，但你可以用 addEventListener 或 attachEvent:

var container = /* ...get the container... */;
if (container.addEventListener) {
    container.addEventListener('click', clickHandler, false);
}
else if (container.attachEvent) {
    container.attachEvent('onclick', function(e) {
       return clickHandler.call(this, e || window.event);
    });
}
else {
    // I wouldn't bother supporting something that doesn't have either
}

function clickHandler(e) {
    var btn = e.target;
    while (btn && btn !== this && btn.id.substring(0, 15) !== "btnReadRFIDTag_") {
        btn = btn.parentNode;
    }
    if (btn && btn !== this) {
        ReadRFIDTag(getId('txtCode_' + btn.id.substring(15)));
    }
}

工作方式是在容器上 Hook click 事件，然后当点击向上(向下？)它时，它会查看点击的来源并查看是否(或者它的祖先)是我们关心的按钮之一。如果是，我们会采取行动。