Как добавить обработчики событий к кнопкам HTML из кода JavaScript

Question

У меня есть список кнопок (квадратов) в HTML, как это -

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

Ранее для каждой кнопки мне приходилось помещать код внутри самого тега кнопки, чтобы добавить обработчик событий, например:

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

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

      // more code
   }

Но теперь я обнаружил, что это нехорошая практика. Поэтому вместо этого я пытаюсь добавить обработчики событий из моего кода JavaScript. Но я не знаю, как это сделать. До сих пор я пробовал это -

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

Но это просто вызывает функцию squareWasClicked (). Так как мне добавить его в качестве обработчика событий, чтобы функция вызывалась при нажатии на квадрат? Кроме того, как я могу сказать что-то вроде

     square.onclick = squareWasClicked(event);

событие не обнаружено в коде JavaScript. Пожалуйста помоги.

Answer 1

Использовать element.addEventListener () (происходит из спецификации DOM 2 Events ).В вашем случае это будет

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

Answer 2

square.onclick = squareWasClicked();

Это вызывает вашу функцию щелчка и назначает результат слушателю событий вашего элемента, а это не то, что вам нужно. Удалите () s, чтобы сама функция была назначена. Следовательно, это должно выглядеть так

square.onclick = squareWasClicked;