Question

我有以下代码，应该将ClickListener添加到表的每个单元格中，但如果我将函数名称与参数一起使用，该函数似乎开始，因为解释器符合要添加的inscruction eventListener。我怎么能解决这个问题？

    function startGame() {
            for(var i = 1; i <= 16; i++) {
                var cellValue = Math.floor(Math.random() * 16);
                while(isPresent(cellValue)) {
                    cellValue = Math.floor(Math.random() * 16);
                }
                numbers[cellValue] = true;
                var cell = document.getElementById("cell" + i);
                cell.addEventListener("click", selectCell(cell), false);
                if(cellValue == 0) {
                    cell.innerHTML = "";
                    cell.setAttribute("class", "emptyCell");
                } else {
                    cell.removeAttribute("class");
                    cell.innerHTML = cellValue;
                }   
            }
        }

    function selectCell(cell) {
            if(!isCellSelected) {
                cellSelected = cell;
                isCellSelected = true;
            } else if(cell == cellSelected) {
                cellSelected = null;
                isCellSelected = false;
            } else {
                var cellID = cell.id;
                var effectiveID = parseInt(cellID.substring(4, 6));
                if(isGranted(effectiveID)) {
                    //COMPLETARE METODO                     
                } else {
                    window.alert("Selezionare solo una cella adiacenta alla cella già selezionata.");
                }
            }
        }

        function isGranted(id) {
            var result;
            var existentEffectiveID = parseInt(cellSelected.id.substring(4, 6));
            //Se la cella selezionata è la successiva o precedente in termini orizzontali o verticali allora si puo' selezionare
            if(id == existentEffectiveID - 4 || id == existentEffectiveID + 4 || id == existentEffectiveID + 1 || id == existentEffectiveID - 1) {
                result = true;
            } else {
                result = false;
            }
            return result;
        }

Answer 1

删除cell.addEventListener("click", selectCell(cell), false);上的参数并改为使用cell.addEventListener("click", selectCell, false);。您可以在函数内部使用this来引用要单击的元素单元格。

Answer 2

事件监听器需要回调。

cell.addEventListener("click", selectCell(cell), false);

通过给它selectCell(cell)你实际上是在说，“调用任何selectCell（）返回”，这是未定义的。另一个问题是当你附加监听器时将调用selectCell（）。

考虑以下差异：

var b1 = document.getElementById("b1");
var b2 = document.getElementById("b2");

var myVar = "hello";

function readVar(){
  console.log(myVar);
}
  

// Calling readVar() now will print "hello"
b1.addEventListener("click", readVar(), false);

// You want to wait until the event actually happens
b2.addEventListener("click", readVar, false);

// Now myVar is "world" and that will be printed whenever b2 is clicked
myVar = "world";

<button id="b1">Button 1</button>
<button id="b2">Button 2</button>

无法在javascript中将EventListener添加到对象

2 个答案: