Делегирование событий, использование цели Target в Javascript

Question

Это html-код

  <table id="bagua-table">
<tr>
  <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
</tr>
<tr>
  <td class="nw"><strong>Northwest</strong>
    <br>Metal
    <br>Silver
    <br>Elders
  </td>
  <td class="n"><strong>North</strong>
    <br>Water
    <br>Blue
    <br>Change
  </td>
  <td class="ne"><strong>Northeast</strong>
    <br>Earth
    <br>Yellow
    <br>Direction
  </td>
</tr>
<tr>
  <td class="w"><strong>West</strong>
    <br>Metal
    <br>Gold
    <br>Youth
  </td>
  <td class="c"><strong>Center</strong>
    <br>All
    <br>Purple
    <br>Harmony
  </td>
  <td class="e"><strong>East</strong>
    <br>Wood
    <br>Blue
    <br>Future
  </td>
</tr>
<tr>
  <td class="sw"><strong>Southwest</strong>
    <br>Earth
    <br>Brown
    <br>Tranquility
  </td>
  <td class="s"><strong>South</strong>
    <br>Fire
    <br>Orange
    <br>Fame
  </td>
  <td class="se"><strong>Southeast</strong>
    <br>Wood
    <br>Green
    <br>Romance
  </td>
</tr>

Сценарий предназначен для выделения выделенной ячейки и при повторном нажатии удаляет выделение. Что такое использование переменной selectedTdи строка, содержащая target.parentnode, что делают эти две строки?

Это код JavaScript

 let table = document.getElementById('bagua-table');

let selectedTd;

table.onclick = function(event) {
  let target = event.target;

  while (target != this) {
    if (target.tagName == 'TD') {
      highlight(target);
      return;
    }
    target = target.parentNode;
  }
}

function highlight(node) {
  if (selectedTd) {
    selectedTd.classList.remove('highlight');
  }
  selectedTd = node;
  selectedTd.classList.add('highlight');//
}

Answer 1

target.parentNode получит родительский узел, к которому принадлежит текущий узел.Строка устанавливает target в качестве HTML-элемента, который содержит текущий элемент.

Например <div class="parent"><button class="child" /></div>.Если target было button, то родительский узел был бы div.

Это происходит каждый цикл, пока не будет найден элемент td или пока он не достигнет глобального объекта.

selectedTd используется для сохранения состояния текущей выбранной ячейки.Каждый раз, когда вызывается функция highlight, она будет проверять, существует ли уже selectedTd.Для существующего класса highlight будет удален и будет заменен на node, переданный в функцию.Для этого node будет добавлен класс highlight.