Come aggiungere gestori di eventi ai pulsanti HTML dall'interno di codice javascript

Question

Ho una lista di pulsanti (quadrati) in HTML come questo -

<td><button id="18" ></button></td> 
    <td><button id="28" ></button></td> 
    <td><button id="38" ></button></td> 
      ... 

In precedenza, per ogni pulsante, ho dovuto mettere il codice all'interno del pulsante tag stesso per aggiungere un gestore di eventi, come questo -

<button id="18" onclick="squareWasClicked(event)"> 

    function squareWasClicked(event) 
    { 
     var element = event.target; 

     // more code 
    } 

Ma ora ho scoperto che non è buona pratica. Così, invece, sto cercando di aggiungere gestori di eventi dal mio codice javascript. Ma non so come farlo. Finora, ho provato questo -

function assignEventsToSquares() 
    { 
    var i,j; 

    for(i=1;i<=8;i++) 
     { 
     for(j=1;j<=8;j++) 
     { 
      var squareID = "" + i + "" + j; 
      var square = document.getElementById(squareID);   
      square.onclick = squareWasClicked(); 
     } 
     } 
    } 

Ma questo semplicemente chiama la funzione squareWasClicked(). Quindi, come faccio ad aggiungerlo come gestore di eventi in modo che la funzione venga richiamata quando si fa clic sul quadrato? Inoltre, come faccio a dire qualcosa come

 square.onclick = squareWasClicked(event); 

evento non rilevato nel codice JavaScript. Per favore aiuto.

Answer 1

square.onclick = squareWasClicked(); 

Ciò richiede la vostra funzione di clic e assegna il risultato al listener di eventi del vostro elemento, che non è quello che si desidera. Rimuovere lo () in modo che venga assegnata la funzione stessa. Quindi, dovrebbe assomigliare a questa

square.onclick = squareWasClicked; 

Answer 2

Utilizzare element.addEventListener() (proveniente dallo DOM 2 Events spec). Nel tuo caso sarà

document.getElementById("18").addEventListener("click", squareWasClicked, false);