事件委派，在Javascript中使用事件目标

这是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>

target.parentNode将获取当前节点所属的父节点。该行将目标设置为包含当前元素的HTML元素

例如。如果target是按钮，那么父节点就是div

每次循环都会发生这种情况，直到找到td元素，或者它到达全局对象

selectedTd用于保持当前选定单元格的状态。 每次调用highlight函数时，它都会检查是否已经存在selectedTd。现有的一个将删除其highlight类，并由传递到函数中的节点替换。此节点将添加highlight类

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');//
}