Question

我做了一个函数名edit（index）。 index是h1标签元素的ID数。每当我单击编辑按钮（具有ID索引）时，输入文本便会出现，为我添加一些文本，因此我可以提交另一个按钮。

function saveChange(index) {    
    if(editName.value != "") {
        productList[index] = editName.value;   
    }    
    spoiler.style.display = 'none'; 
}

//and here i call the event
function edit(index) {    
    spoiler.style.display = "block";    
    document.getElementById('save').addEventListener('click',saveChange(index)); 
}

如何传递index参数？

Answer 1

如果要在addEventListener中传递参数，则需要使用匿名函数。请改用以下代码：

document.getElementById('save').addEventListener('click', () => saveChange(index));

这是因为，如果您将saveChange(index)本身添加到addEventListener中，它将实际上执行该函数，而不是将其保存以供事件监听器使用。这也是您必须在setInterval和setTimeout中使用函数引用/匿名函数的原因（有关更多信息，请参见my answer）。

Answer 2

您可以在匿名函数内部调用该函数。

更改

document.getElementById('save').addEventListener('click',saveChange(index));

收件人

document.getElementById('save').addEventListener('click', function(){saveChange(index)});

演示：

function saveChange(index) { 
  console.log("save: "+index);
  //if(editName.value != "") {
    //productList[index] = editName.value;   
  //}    
  //spoiler.style.display = 'none'; 
}

//and here i call the event
function edit(index) {    
  //spoiler.style.display = "block";    
  document.getElementById('save').addEventListener('click', function(){saveChange(index)}); 
}

edit(10)

<button type="button" id="save">Save</button>

为什么我不能将参数传递给addEventListener内的匿名函数，如何解决？

2 个答案: