단추에 이벤트 수신기를 추가하는 방법

Question

단추에 이벤트 수신기를 추가하려면 어떻게해야합니까? 버튼을 클릭하면 speler1gooien 함수를 실행해야합니다. 아래 예제 코드를 실행하면 speler1gooien 함수가 페이지로드에서 실행됩니다. 클릭했을 때만 내 기능을 실행하는 올바른 방법은 무엇입니까?

window.onload = function() { 
      buttonSpeler1 = document.getElementById("buttonspeler1"); 
      buttonSpeler2 = document.getElementById("buttonspeler2"); 
      tafelp2.src = "images/rechts_" + aantalBekersP2 + ".png"; 
      resultaat = document.getElementById("resultaat"); 
      buttonSpeler1.addEventListener("click", speler1gooien()); 
     }; 

     var speler1gooien = function() { 
      // some code 

     } 

Answer 1

의 () 다음 이름을 제거합니다.

buttonSpeler1.addEventListener("click", speler1gooien); 
//             ^removed() 

괄호를 제거하면 함수 개체를 실행하는 대신 전달합니다.

Answer 2

것은 당신의 onclick 핸들러로 speler1gooien 기능을 첨부하려고하지만 코드는 핸들러로 spele1gooien 함수의 결과를 첨부합니다. 그냥이 기능은 즉시 실행하고, 반환 값은 클릭 이벤트 핸들러로 전달되는 원인이 있기 때문에 호출 speler1gooien()에 괄호를 제거하는 기능

window.onload = function() { 
     buttonSpeler1 = document.getElementById("buttonspeler1"); 
     buttonSpeler2 = document.getElementById("buttonspeler2"); 
     tafelp2.src = "images/rechts_" + aantalBekersP2 + ".png"; 
     resultaat = document.getElementById("resultaat"); 
     buttonSpeler1.addEventListener("click", speler1gooien); 
}; 

var speler1gooien = function() { 
    // some code 
}