1

I'm programming in Javascript.

I need to dynamically generate the event handlers for the onclick event.

Here above the code:

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

}

The problem, obviously is that at run time the i variable get the latest value and not the right value.

But I can't fix the problem, because the handler does not allow parameters for the function.

How can I solve this problem?

Thank you.

Have a good day.

4

1 回答 1

6

三个选项：

使用生成器函数

通常的方法是为处理程序提供一个构建器函数：

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，而不是 over i，因此它看到了正确的值。

使用 ES5Function#bind

如果你可以依赖 ES5（或者你包含一个 ES5 shim，因为这是一个 shimable 功能），你可以这样做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));
}

使用事件委托

不要在每个按钮上放置一个处理程序，如果它们都在一个容器中（当然，最终它们是，即使它只是document.body），你可以把处理程序放在那个容器上，然后event.target用来找出哪个按钮是点击。我不会用 old-style 这样做onclick，但你可以用addEventListeneror 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)));
    }
}

工作方式是将click事件挂钩到容器上，然后当点击冒泡（向下？）到它时，它会查看点击的来源并查看它（或它的祖先）是否是按钮之一我们关心。如果是，我们就采取行动。

于 2013-05-28T14:34:10.073 回答