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元素。

E.g。 <div class="parent"><button class="child" /></div>。如果target是button，则父节点将是div。

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

selectedTd用于保持当前所选单元格的状态。每次调用highlight函数时，它都会检查是否存在已存在的selectedTd。现有的类将删除其highlight类，并将被传递给函数的node替换。此node将添加highlight类。

事件委派，在Javascript

1 个答案: