私はこのようなHTMLのボタン（四角）のリスト持って

Question

javascriptのコード内から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

square.onclick = squareWasClicked(); 

になります。関数自体が割り当てられるように、()を削除します。 したがって、[仕様]（http://www.w3.org/TR/html4/types.html#type-name）によれば、_、サイドノートでは、この

square.onclick = squareWasClicked; 

Answer 2

element.addEventListener()（DOM 2 Events spec由来）を使用してください。あなたのケースでは、これはあなたのクリック機能を呼び出して、あなたが望むものではありません、あなたの要素のイベントリスナーに結果を割り当て

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