javascript eventlistener fire immédiatement au lieu de sur l'événement

Question

J'essaie d'utiliser une méthode EventListener avec l'événement click pour ajouter simplement un élément à la liste <ul>. J'essaye d'invoquer la fonction avec l'événement click sur le noeud d'élément de bouton, mais la fonction est invoquée chaque fois que j'actualise/charge un site Web.

function addElementToList() { 
    var navigationPanel = document.getElementsByTagName('ul')[0]; 

    var newElementOnList = document.createElement('li'); 
    var newElementsText = document.createTextNode('About'); 

    newElementOnList.appendChild(newElementsText); 
    navigationPanel.appendChild(newElementOnList); 
} 

var elButton = document.getElementById('myButton'); 
elButton.addEventListener('click', addElementToList(), false); 

Pourquoi la fonction addElementToList s'exécute-t-elle chaque fois que j'actualise/charge un site Web?

Answer 1

Lorsque vous ajoutez l'écouteur d'événement,

elButton.addEventListener('click', addElementToList(), false); 

Vous appelez la fonction. changer à

elButton.addEventListener('click', addElementToList, false); 

Et vous devriez être bon à faire.

Answer 2

Ce que vous avez, c'est d'ajouter le résultat de addElementToList (lorsque la fonction est appelée) à l'écouteur d'événement. Pas la méthode elle-même.

Pour mettre la méthode elle-même que vous voulez utiliser le nom sans parenthèses

elButton.addEventListener('click', addElementToList, false); 

au lieu de

elButton.addEventListener('click', addElementToList(), false);