javascript - JS 将事件添加到动态添加行的列表

Question

你好，我在列表中动态插入行。现在只需单击按钮即可发生这种情况，但最终数据将来自数据库。那很好用!

我想要做的是，一旦列表呈现给用户，他/她就会将鼠标移到所需的列表项上。那时应该突出显示该元素。所以我想在每一行中添加 mouseover 和 mouseout 事件。但是事件是在函数声明本身上触发的。请在此处找到 JSfiddle 链接: https://jsfiddle.net/indiaaditya/ycyb9dot/

问题部分在这里::

function AddEventsToTableForEachRow(tableId) {
  //Get the NodeList
  alert("Function Called!");
  var nodelist = document.querySelectorAll(".classTableElement");
  var lclCntr = 0;
  alert("Elements found:" + nodelist.length);
  //Set ID's for all the elements
  var strInloop = "";
  //This loop sets the ID for each row.
  for (lclCntr = 0; lclCntr < nodelist.length; lclCntr++) {
    strInloop = "tr" + lclCntr;
    nodelist[lclCntr].setAttribute("id", strInloop);
  }
  //This loop adds event for each row.
  for (lclCntr = 0; lclCntr < nodelist.length; lclCntr++) {
    strInloop = "tr" + lclCntr;
    var rowElement = document.getElementById(strInloop);
    rowElement.addEventListener("onmouseover", alert("A"), false);
  }
}

JSFiddle代码说明:

1. 单击生成列表按钮添加行。

2.单击 GlowRecord 按钮以突出显示第一行。再次单击它以删除突出显示。这是鼠标悬停和鼠标移出时所需的功能。

3.单击 AddEvents 以生成事件。 这是不起作用的代码部分

AddEvents 调用

AddEventsToTableForEachRow('tblTestList')

功能。但是这个函数会立即调用其中的警报函数调用。

预期结果是调用 AddEventsToTableForEachRow 后，事件应附加到每一行，当鼠标移动到该行时，应显示警告消息。

实际上，如前所述，AddEventsToTableForEachRow 中的警报函数会立即被调用，鼠标悬停时不会执行任何操作。

对于那些质疑我为什么没有使用 jquery 的人:A。我是 JS/HTML/CSS 的新手。我来自 C/C++ 背景，因为使用 HTML/CSS/JS 构建 UI 很容易，所以来到这边。b.我正在快速学习，发现 DOM 更清晰、更容易理解。但是在这个问题上花了 3 天时间后，我已经准备好应对任何事情。 (但如果我得到基于 DOM 的解决方案会更快乐!)

提前致谢。

亲切的问候，阿迪亚

Answer 1

与其将事件监听器添加到每一行，不如将其添加到表中一次。然后，在您的事件处理程序中，您可以使用 event.target以确保事件发生在正确的元素上。

function mouseOverHandler(event) {
  var tr = event.target;
  while(tr) {
    if (tr.localName === 'tr') {
      break;
    }
    
    tr = tr.parentNode;
  }
  
  // tr will be null if the `<table>` was the event recipient
  if (tr) {
    console.log(tr.localName, tr.textContent);
  }
}  

function AddEventsToTable(tableId) {
  var table = document.getElementById(tableId);
  if (table) {
    table.addEventListener("mouseover", mouseOverHandler, false);
  }
}

AddEventsToTable('mytable');

<table id="mytable">
  <tr>
    <td>row 1, col 1</td>
    <td>row 1, col 2</td>
    <td>row 1, col 3</td>
    <td>row 1, col 4</td>
  </tr>
  <tr>
    <td>row 2, col 1</td>
    <td>row 2, col 2</td>
    <td>row 2, col 3</td>
    <td>row 2, col 4</td>
  </tr>
  <tr>
    <td>row 3, col 1</td>
    <td>row 3, col 2</td>
    <td>row 3, col 3</td>
    <td>row 3, col 4</td>
  </tr>
</table>

当您的鼠标移动到任何子表时，这确实会触发事件，但我使用 while 循环将事件目标转换为适当的 <tr> .