如何从javascript代码中向HTML按钮添加事件处理程序

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;