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

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
}