JS-如何向带有参数的div中添加onclick事件？

Question

我知道如何将不带参数的onclick事件添加到div中：

newDiv.onclick = selectUnit;

function selectUnit() {}

但是我无法使其与参数一起使用：

function appendUnit(nb) {
    var newDiv = document.createElement("div");

    newDiv.id = "unit" + nb;
    newDiv.onclick = selectUnit(this.id); // This throws me undefined
    document.getElementById("unitsList").appendChild(newDiv);
}

function selectUnit(id) {
    console.debug(id);
}

我怎样才能做到这一点 ？

Answer 1

您将需要一个匿名函数，因为无法将参数传递给引用的函数

function appendUnit() {
    var newDiv = document.createElement("div");

    newDiv.onclick = function() {
        selectUnit(this.id);
    }

    document.getElementById("unitsList").appendChild(newDiv);
}

function selectUnit(id) {
    console.debug(id);
}

但要注意的价值this将继续，所以你可以做

function appendUnit() {
    var newDiv = document.createElement("div");

    newDiv.onclick = selectUnit;

    document.getElementById("unitsList").appendChild(newDiv);
}

function selectUnit() {
    console.debug( this.id ); // this is still the same here
}

Answer 2

有了那行代码

newDiv.onclick = selectUnit(this.id);

您只需调用该函数，获取其结果并将其存储到onclick处理程序即可。

内部没有定义返回的函数将返回未定义。 this.id将引用您当前在范围内具有的this元素， this元素可能是window对象。

当点击发生时，Chrome会在某个地方调用此函数

DOMElement.onclick(EventObject);

和你的线将是这样的

(undefined)(this.id);

导致错误

您要做的就是使用方法设置onclick

newDiv.onclick = selectUnit;

chrome会称之为

DOMElement.onclick(EventObject);

有了DOMElement.onclick == selectUnit我们可以假设DOMElement.onclick == selectUnit与此类似：

selectUnit(EventObject);

然后，在selectUnit函数上，您必须知道如何访问id 。 您可以在https://developer.mozilla.org/zh-CN/docs/Web/API/Event上看到可以使用的功能。 因此，新的selectUnit函数将是：

function selectUnit(event) {
    var id = event.target.id;
    console.debug(id);
}

Answer 3

您永远不会在示例代码中设置ID：

function appendUnit() {
    var newDiv = document.createElement("div");
    newDiv.id = "somevalue";

    [...]
    newDiv.onclick = "selectUnit(this.id);" // This throws me undefined
    document.getElementById("unitsList").appendChild(newDiv);
}

function selectUnit(id) {
    console.debug(id);
}

Answer 4

尝试这个

function appendUnit() {
    var newDiv = document.createElement("div");

    [...]
    newDiv.onclick = function(){
        selectUnit(newDiv.id); // This throws me undefined
    }
    document.getElementById("unitsList").appendChild(newDiv);
}