Làm thế nào để thêm xử lý sự kiện cho nút HTML từ bên trong mã javascript

Question

Tôi có một danh sách các nút (hình vuông) trong HTML như thế này -

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

Trước đó, đối với mỗi nút, tôi đã phải đặt mã trong nút tự thêm thẻ để thêm trình xử lý sự kiện, như thế này -

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

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

     // more code 
    } 

Nhưng bây giờ tôi đã phát hiện ra rằng nó không phải là thực hành tốt. Vì vậy, thay vào đó, tôi đang cố gắng thêm xử lý sự kiện từ bên trong mã javascript của tôi. Nhưng tôi không biết làm thế nào để làm điều đó. Cho đến nay, tôi đã thử điều này -

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

Nhưng điều này chỉ đơn giản gọi hàm squareWasClicked(). Vì vậy, làm thế nào để tôi thêm nó như là một xử lý sự kiện để các chức năng sẽ được gọi khi vuông được nhấp? Ngoài ra, làm cách nào để nói điều gì đó giống như

 square.onclick = squareWasClicked(event); 

sự kiện không được phát hiện trong mã JavaScript. Hãy giúp tôi.

Answer 1

square.onclick = squareWasClicked(); 

này gọi chức năng nhấp chuột của bạn và gán kết quả để lắng nghe sự kiện của nguyên tố của bạn, mà không phải là những gì bạn muốn. Loại bỏ các () s để bản thân chức năng được gán. Do đó, nó sẽ giống như thế này

square.onclick = squareWasClicked; 

Answer 2

Sử dụng element.addEventListener() (có nguồn gốc từ số DOM 2 Events spec). Trong trường hợp của bạn nó sẽ được

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