功能由事件侦听器运行称为无事件

我有这些变量，指的是一个按钮和一个盒子功能由事件侦听器运行称为无事件

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

来源

2017-10-08 TimGraupner

你需要传递一个函数，而不是调用结果 – Bergi

您可能想要绑定该框：'... addEventListener（“click”，showBox.bind（this，greenBox））' –

showBox作为函数进行计算。

showBox(greenBox)调用函数并将其评估为其返回值。

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

本质上是一样的：

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

由于功能不具有return声明，即返回值是undefined。

你需要把一个函数作为第二个参数到showGreen.addEventListener。

来源

2017-10-08 20:55:19 Quentin

我没有意识到我没有调用这样的函数。谢谢！ – TimGraupner

那是因为你不应该调用事件侦听器里面的功能，它应该是这样的：

showGreen.addEventListener("click", showBox);

否则（如果你会调用事件侦听器里面的函数），该函数填充来执行时口译员将到达这条线。

或者，如果你想传递一个参数，你可以用功能在辅助功能是这样的：

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

这里是例子：

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

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

来源

2017-10-08 20:55:51

这正是我所期待的，谢谢。 – TimGraupner

@TimGraupner，不客气 –

如果你想通过addEventListener传入变量你应该使用如下的匿名函数作用域

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

而且你必须要小心，如果你想访问“事件”变量则无法访问上面的代码，那么你可以使用下面

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

来源

2017-10-08 21:06:21

功能由事件侦听器运行称为无事件

回答

相关问题