javascript - 获取调用函数的当前元素？

Question

我已将一个函数挂接到多个控件的同一事件:

element.onchange = SetSelected;

在SetSelected中，我需要知道哪个元素调用了我。我错误地尝试执行以下操作:

element.onchange = SetSelected(element.id);

这当然调用的函数不是我想要的。

我想也许 this 关键字可以为我提供我想要的东西，但它没有(在 SetSelected 函数中)。

var element = this;

我没有使用 jquery，并且不想为这样一个琐碎的任务添加依赖项。

对于那些提出要求的人，这里是完整的示例:

var imageNumber = 12;
var elementId = "cphContent_rdoSelected";

window.onload = function () {
    for (var i = 1; i <= imageNumber; i++) {
        var element = document.getElementById(elementId + i.toString());

        //select the first element by default
        if (i === 1) {
            SetSelected(element.id);
        }
        element.onchange = SetSelected;
    }
};

function SetSelected() {
    for (var i = 1; i <= imageNumber; i++) {
        var radioButton = this;//document.getElementById(elementId + i.toString());

        var lbl = document.getElementById("lbl" + i.toString());

        if ( id === radioButton.id) {
            if (!radioButton.hasAttribute("checked")) {
                radioButton.setAttribute("checked","");
                lbl.style.display = "block";
            }
        }
        else {
            if (radioButton.hasAttribute("checked")) {
                radioButton.removeAttribute("checked");
            }
            lbl.style.display = "none";

        }
    }
};

Answer 1

如果您执行element.onchange = SetSelected;，则使用this将起作用。但是，您的问题似乎在于

if (i === 1) {
    SetSelected(element.id);
}

这不起作用，因为 this 不会引用该元素，而是引用 window。您必须通过 .call 或 .apply 显式设置 this:

if (i === 1) {
    SetSelected.call(element);
}

了解此的来源:

• MDN
• quirksmode.org