Jak dodać obsługi zdarzeń do przycisków HTML z kodem javascript

Question

mam listę przycisków (kwadraty) w HTML podobnego -

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

wcześniej, dla każdego przycisku, musiałem umieścić kod w przycisk oznaczyć się, aby dodać moduł obsługi zdarzeń, taki jak ten -

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

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

     // more code 
    } 

Ale teraz odkryłem, że nie jest to dobra praktyka. Zamiast tego próbuję dodać moduły obsługi zdarzeń z mojego kodu javascript. Ale nie wiem, jak to zrobić. Do tej pory próbowałem tego -

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

Ale to po prostu wywołuje funkcję squareWasClicked(). Jak więc dodać go jako funkcję obsługi zdarzeń, aby funkcja była wywoływana po kliknięciu tego kwadratu? Ponadto, jak mogę powiedzieć coś takiego jak zdarzenie nie zostanie wykryte w kodzie JavaScript. Proszę pomóż.

Answer 1

square.onclick = squareWasClicked(); 

Wymaga to czynność kliknięcia i przypisuje wynik do detektora zdarzeń elemencie, który nie jest to, co chcesz. Usuń () s, aby sama funkcja została przypisana. Dlatego powinien wyglądać tak

square.onclick = squareWasClicked; 

Answer 2

Użyj element.addEventListener() (pochodzącego z DOM 2 Events spec). W twoim przypadku to będzie

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