javascript - 事件委托(delegate)，Javascript中事件Target的使用

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添加了类。