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);
}