현재 코드에는 td 태그마다 클릭 이벤트 리스너가 달려 있습니다. 나중에 이벤트 리스너를 제거할 상황이 생기면 이벤트 리스너 9개를 일일이 제거해야 합니다. 이벤트 리스너를 한 번에 달고 제거할 수 있으면 좋겠죠? 코드를 다음과 같이 수정합니다. td 태그에서 이벤트를 제거하고 table 태그에 이벤트를 연결합니다.

for (let i = 1; i <= 3; i++) {
  const $tr = document.createElement('tr'); 
  const cells = [];
  for (let j = 1; j <= 3; j++) {

    const $td = document.createElement('td'); 
    cells.push($td);

    $tr.appendChild($td);
  }
  rows.push(cells);
  $table.appendChild($tr);

  $table.addEventListener('click', callback);

}

기존과 결과가 같습니다. td를 클릭할 때 table에도 click 이벤트가 발생합니다. 자식 태그에 이벤트가 발생할 때 부모 태그에도 동일한 이벤트가 발생하는 현상인 이벤트 버블링 때문입니다. 기억나지 않는다면 4.3.4 이벤트 버블링과 캡처링을 참고해 주세요.