javascript - .Onclick 和 .addEventListener ("click")都不限于单击按钮时

Question

(编程新手，最近刚刚卸下我的ProcessingJS轮子)。

我正在尝试制作一个简单的井字棋游戏；为了实现这一点，我创建了一个嵌套的 for 循环，它定义并在网页上绘制 9 个风格化按钮，并将它们插入按钮数组第一个数组中的 [0] 位置(其中的其他两个位置)被 bool 值占据，我将用它来指示该按钮是否属于playerX或playerO)。然后，我尝试这样做，以便当按下按钮时，使用按钮[按钮编号标识符，0-8][0]，它运行 setSquare 函数，参数等于按钮的编号(按钮编号标识符)。

但是当我运行程序并检查控制台时，在我单击任何内容之前(当我将其放入 for 循环中时)它就已经运行了该程序，或者它运行一次，然后始终默认为最后一个 else 。我已经被困在这个问题上好几个小时了，我翻遍了很多资料。有什么意见吗？另外，如果这不是一个好问题，我很抱歉。如果它因任何原因被删除，也不会感到难过。

var setSquare = function(q) {
            if (button[q][1] === false && button[q][2] === false) {
                button[q][1] = true;
                console.log("button" + q + " now belongs to PlayerX");
            } else if (button[q][1] === false) {
                button[q][2] = true;
                console.log("button" + q + " now belongs to PlayerO");
            } else {
                millieBot();
            }
        }     

        var button = [ [/*0*/], [/*1*/], [/*2*/], [/*3*/], [/*4*/], [/*5*/], [/*6*/], [/*7*/], [/*8*/] ];  //Just the place where I'm gonna put all the buttons/squares, alongside the fact of whether they are owned by X or O. (Inserted by a for loop, to make it look something like: button = [document.createElement("button"), false, false], [...])

        button[0][0].addEventListener("click", setSquare(0));

重要说明:我现在使用纯粹的 javascript 和 HTML (JS DOM)，因为我想在转向 jQuery 或任何其他东西之前首先更好地掌握基础知识。

Answer 1

addEventListener 需要对函数的引用，而不是函数调用。
所以你只需写(不带括号)

button[0][0].addEventListener("click", setSquare);

因为您想将参数传递给函数，所以可以将其包装在匿名函数中

button[0][0].addEventListener("click", function() { setSquare (0); });