Question

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

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处理程序中。

内部没有定义返回的函数返回undefined。 this.id会引用您在您的范围内可能是this对象的window元素。

当onclick发生时，某处chrome会调用此函数

DOMElement.onclick(EventObject);

使用你的专线，它将是这样的

(undefined)(this.id);

导致错误

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

newDiv.onclick = selectUnit;

Chrome会调用此

DOMElement.onclick(EventObject);

拥有DOMElement.onclick == selectUnit我们可以假设代码的上面一行与此类似：

selectUnit(EventObject);

然后，在selectUnit功能上，您必须知道如何访问id。你可以在https://developer.mozilla.org/en-US/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);
}

JS - 如何使用参数向div添加onclick事件？

4 个答案: