我不知道如何解決事件問題？

Question

我正在用js構建一個戰艦游戲。 我在網格的目標元素上添加了事件偵聽器，我正在嘗試制作一個帶有一個參數（船長）的函數，根據該參數，函數應該在我的網格上渲染船。 問題是，無論我將什么參數傳遞給函數，它都會使船的長度相同。 我認為問題是事件偵聽器在我第一次單擊元素時保持不變。

這是代碼：

function placeBoat (boatLength){
    domElements.yourGrid.onclick = function(event){
        let target = event.target;
        console.log(event)
        let clickedPosition = target.id
        let clickedPositionId = clickedPosition.slice(4, 6)
        let clikedPositionInt = parseInt(clickedPositionId);
        for(let i = 0; i < boatLength; i++){
            target.style.background = "green";
            target = document.querySelector("#cell" + clikedPositionInt)
            clikedPositionInt += 10;
        }
    }
}

domElements.boat1Button.addEventListener("click", placeBoat(3))
domElements.boat2Button.addEventListener("click", placeBoat(4))
domElements.boat3Button.addEventListener("click", placeBoat(5))

Answer 1

addEventListener 的第二個參數是監聽器函數（ https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener ）。 但是，您調用的是函數placeBoat而不是將函數作為參數傳遞。

讓我們從一個簡單的解釋開始。 定義一些不帶參數的新函數並使用它們添加事件偵聽器：

function placeBoat3() {
    placeBoat(3);
}
function placeBoat4() {
    placeBoat(4);
}
function placeBoat5() {
    placeBoat(5);
}

domElements.boat1Button.addEventListener("click", placeBoat3)
domElements.boat2Button.addEventListener("click", placeBoat4)
domElements.boat3Button.addEventListener("click", placeBoat5)

如您所見，現在 addEventListener 的第二個參數是不帶括號的函數名。 一旦您對這個想法感到滿意，您就可以繼續前進並使用箭頭功能。 擺脫新函數並調用 addEventListeners，如下所示：

domElements.boat1Button.addEventListener("click", () => placeBoat(3))
domElements.boat2Button.addEventListener("click", () => placeBoat(4))
domElements.boat3Button.addEventListener("click", () => placeBoat(5))

() => placeBoat(3)是定義一個沒有參數的函數的簡寫，它在其主體中調用placeBoat(3) 。 您可以在https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions了解有關它們的更多信息