fonctions appelées en exécutant écouteur d'événement sans l'événement

Question

Je ces variables, se référant à un bouton et une boîte

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

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

Ces fonctions sont appelées par les auditeurs d'événements

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

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

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

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

Cependant, rien ne se passe Je clique sur le bouton J'ai remarqué que se débarrasser de la fonction hideBox fait apparaître la boîte instantanément, donc je pense que les fonctions sont en cours d'exécution indépendamment de tout ce qui est cliqué ou non. Pourquoi? Le code complet est ici: http://jsbin.com/poxutopuhu/edit?html,css,js,output

Answer 1

showBox s'évalue comme une fonction.

showBox(greenBox)appelle la fonction et évalue comme valeur de retour.

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

est essentiellement le même que:

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

Étant donné que la fonction ne dispose pas d'une déclaration return, que la valeur de retour est undefined.

Vous devez définir une fonction comme second argument sur showGreen.addEventListener.

Answer 2

C'est parce que vous ne devriez pas appeler la fonction à l'intérieur écouteur d'événement, il devrait ressembler à ceci:

showGreen.addEventListener("click", showBox); 

Dans le cas contraire (si vous appellerez la fonction à l'intérieur écouteur d'événement), exécuter le remplissage de fonction lorsque le interprète atteindra cette ligne.

Ou bien, si vous voulez passer un paramètre, vous pouvez envelopper la fonction dans la fonction auxiliaire comme ceci:

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

Et voici l'exemple:

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

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

Answer 3

si vous voulez passer la variable dans addEventListener Vous devez utiliser la portée de la fonction anonyme comme ci-dessous

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

Aussi vous devez être prudent si vous souhaitez accéder à la variable « événement » vous ne pouvez pas accéder au code ci-dessus, vous pouvez utiliser ci-dessous

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