JavaScriptでの○×ゲームのプログラムについて質問です

ネットのブログを参考にしたのですがわからないことが2点あります。アドバイスよろしくお願いします

疑問1 classNameの使い方について

JavaScript
1td.className = `cell ${j}-${i}`;

tdのclassNameを変更しているようですが、このあとも使われることがないようです。いったいどういう目的があるのでしょうか？

疑問2 引数の中身について

JavaScript
1d.addEventListner("click", (event) => {
2let self = event.target;
3}

tdをクリックしたら引数として(event)が用意されていてアロー関数が実行されているようですが、このeventには実際にはなにが入るのでしょうか？そしてevent.targetの中身は何なのでしょうか？

JavaScript
1window.addEventListener("DOMContentLoaded", () => {
2  let board = document.getElementById("board");
3  let xy = 3;
4  let count = 0;
5
6  for (let i = 0; i < xy; i++) {
7    let tr = document.createElement("tr");
8    for (let j = 0; j < xy; j++) {
9      let td = document.createElement("td");
10      const option = { once: true };
11
12      td.className = `cell ${j}-${i}`;
13      tr.appendChild(td);
14
15      td.addEventListener(
16        "click",
17        (event) => {
18          let self = event.target;
19          let pice = count++ % 2 == 0 ? "○" : "×";
20          self.textContent = pice;
21          if (count == xy * xy) {
22            setTimeout(() => {
23              alert("終了しました。");
24            }, 300);
25          }
26        },
27        option
28      );
29    }
30    board.appendChild(tr);
31  }
32});

追記

htmlとcssを載せるのを忘れていました。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8" />
5    <link rel="stylesheet" href="style.css" />
6  </head>
7  <body>
8    <div id="container">
9      <table id="board"></table>
10    </div>
11    <script src="main.js"></script>
12  </body>
13</html>

css
1#container {
2  padding: 10px;
3  margin-right: auto;
4  margin-left: auto;
5}
6
7table {
8  border-collapse: collapse;
9  border-spacing: 0;
10  border: 1px solid #999;
11  text-align: center;
12  background-color: green;
13  max-width: 100%;
14}
15
16td {
17  width: 50px;
18  height: 50px;
19  color: #fff;
20  font-size: 25px;
21  font-weight: bold;
22  border: 1px solid #fff;
23  user-select: none;
24}