Javascript：生成动态处理程序 [英] Javascript: generate dynamically handler

问题描述

我正在用Javascript编程。

I'm programming in Javascript.

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

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

上面代码：

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.

如何解决这个问题？

谢谢。

祝你有个美好的一天。

推荐答案

三个选项：

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

The usual way is to have a builder function for the handlers:

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

由 buildHandler构建的函数从 buildHandler 的调用中关闭 index 参数，而不是超过 i ，因此它看到正确的值。

The function built by the buildHandler closes over the index argument from that call to buildHandler, rather than over i, and so it sees the right value.

如果您可以依赖ES5（或者您包含ES5垫片，因为这是一个可调节的功能），您可以使用功能#bind ：

If you can rely on ES5 (or you include an ES5 shim, as this is a shimmable feature), you can do it with 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);
}

这样使用会产生不必要的额外功能，所以你也可以使用它像这样：

Used like that, it creates unnecessary extra functions, so you could also use it like this:

// 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 找出单击的按钮。我不会用旧式的 onclick 来做到这一点，但你可以用 addEventListener 或 attachEvent ：

Use Event Delegation

Instead of putting a handler on each button, if they're all in a container (and ultimately, of course, they are, even if it's just document.body), you can put the handler on that container and then use event.target to find out which button was clicked. I wouldn't do that with old-style onclick, but you can with addEventListener or 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)));
    }
}

工作方式是挂钩在容器上单击事件，然后当点击向上（向下？）到它时，它会查看点击源自的位置并查看该点击（或其祖先）是否为1我们关心的按钮。如果是，我们会采取行动。

The way that works is by hooking the click event on the container, and then when the click bubbles up (down?) to it, it looks at where the click originated and sees if that (or an ancestor of it) is one of the buttons we care about. If it is, we act on it.

这篇关于Javascript：生成动态处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！