Cómo agregar controladores de eventos a los botones HTML desde dentro de código JavaScript

Question

tengo una lista de botones (cuadrados) en HTML como este -

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

Anteriormente, para cada botón, tuve que poner el código en el botón propia etiqueta para agregar un controlador de eventos, como este -

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

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

     // more code 
    } 

Pero ahora he descubierto que no es una buena práctica. Por lo tanto, en su lugar, estoy tratando de agregar controladores de eventos desde mi código de JavaScript. Pero no sé cómo hacer eso. Hasta ahora, he intentado esto -

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(); 
     } 
     } 
    } 

Pero esto simplemente llama a la función squareWasClicked(). Entonces, ¿cómo lo agrego como controlador de eventos para que la función se invoque cuando se hace clic en el cuadrado? Además, ¿cómo puedo decir algo como

 square.onclick = squareWasClicked(event); 

no se detecta el evento en el código JavaScript. Por favor ayuda.

Answer 1

square.onclick = squareWasClicked(); 

Este llama a su función de clic y asigna el resultado a la escucha de sucesos de su elemento, que no es lo que desea. Elimine () s para que se asigne la función en sí. Por lo tanto, debe tener este aspecto

square.onclick = squareWasClicked; 

Answer 2

Use element.addEventListener() (originario de DOM 2 Events spec). En su caso, será

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