Question

我有这些变量，指的是一个按钮和一个框

var showGreen = document.getElementById("showGreen");

var greenBox = document.getElementById("greenBox");

这些函数由事件侦听器调用

function showBox(myElement){
  myElement.style.display = "block";
}

function hideBox(myElement){
  myElement.style.display = "none";
}

showGreen.addEventListener("click", showBox(greenBox));

hideGreen.addEventListener("click", hideBox(greenBox));

但是，单击按钮时没有任何反应。我注意到摆脱hideBox功能使得框立即出现，所以我认为无论是否点击任何内容，这些功能都是自己运行的。为什么？完整代码位于：http://jsbin.com/poxutopuhu/edit?html,css,js,output

Answer 1

因为你不应该调用事件监听器中的函数，它应该是这样的：

showGreen.addEventListener("click", showBox);

否则（如果你将调用事件监听器内的函数），当解释器到达这一行时，将执行函数填充。

或者，如果要传递参数，可以将函数包装在辅助函数中，如下所示：

showGreen.addEventListener("click", function() {
  showBox(greenBox);
})

这是一个例子：

＆＃13;

var showGreen = document.getElementById('showGreen');
function showBox(param) {
  console.log(param);
}
showGreen.addEventListener("click", function() {
  showBox('param');
})

＆＃13;

<button id="showGreen">Click</button>

＆＃13;

Answer 2

showBox作为一个函数进行评估。

showBox(greenBox) 调用函数并计算其返回值。

showGreen.addEventListener("click", showBox(greenBox));

基本上与：

相同

var return_value = showBox(greenBox);
showGreen.addEventListener("click", return_value);

由于该函数没有return语句，因此返回值为undefined。

您需要将函数作为showGreen.addEventListener的第二个参数。

Answer 3

如果你想通过addEventListener传递变量你应该使用匿名函数的范围，如下所示

showGreen.addEventListener("click", function() { showBox(greenBox); } );

如果你想访问＆＃34; event＆＃34;你也必须要小心。变量然后你无法访问上面的代码然后你可以使用下面的

showGreen.addEventListener("click", function(e) { showBox(greenBox,e); } );

事件侦听器调用的函数在没有事件的情况下运行

3 个答案: