javascript-events - 如何从 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 spec )。在你的情况下，它将是

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