Javascript JS将事件添加到动态添加行的列表中

你好 我正在列表中动态插入行。现在，只要点击一下按钮，就会发生这种情况，但最终数据将来自数据库。那很好！ 我想做的是，一旦列表呈现给用户，他/她就会将鼠标移到所需的列表项上。此时应突出显示该项目。 所以我想在每一行中添加mouseover和mouseout事件。 但事件是在函数声明本身上触发的。 请在此处找到JSFIDLE链接：

问题部分在这里：：

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

函数AddEventsToTableForEachRow（tableId）{
//找到节点列表
警报（“调用函数！”）；
var nodelist=document.queryselectoral（“.classTableElement”）；
var LCNTR=0；
警报（“找到的元素：+nodelist.length”）；
//为所有元素设置ID
var strInloop=“”；
//此循环设置每行的ID。
对于（lclCntr=0；lclCntr

JSFIDLE代码的解释： 1.单击“生成列表”按钮添加行。 二,。单击GlowRecord按钮高亮显示第一行。再次单击以删除突出显示。这是mouseover和mouseout上所需的函数。 三,。单击AddEvents以生成事件。这是代码中不起作用的部分

加法器调用 AddEventsToTableForEachRow（'tblTestList'） 功能。 但此函数会立即调用其中的警报函数调用

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

实际上，如前所述，AddEventToTableForEachRow中的警报函数会立即调用，并且不会对鼠标进行任何操作

对于那些质疑我为什么没有使用jquery的人： A.我是JS/HTML/CSS的新手。我来自C/C++背景，来到这里是因为用HTML/CSS/JS构建UI很容易。 B我在不断地学习，发现DOM更干净、更容易理解。 但在这个问题上花了3天时间后，我已经准备好了一切。（但如果我得到基于DOM的解决方案，我会更高兴！）

提前谢谢

亲切问候,，

---

Aditya

更改

行元素。添加的EventListener（“onmouseover”，警报（“A”），false）

到
rowElement.addEventListener（“鼠标悬停”，函数（）{alert（“A”）；}，false）
更改
rowElement.addEventListener（“onmouseover”，警报（“A”），false）

到
rowElement.addEventListener（“鼠标悬停”，函数（）{alert（“A”）；}，false）
据我所知，你的问题。你想完成这样的事情

首先生成一行并添加到dom中
您希望附加“onmouseover”事件，并希望简单地发出警报（“A”）
你做错了什么？

rowElement.addEventListener("onmouseover", alert("A"), false);

你做的每件事都很好，但问题出在你上面的代码行记住您只能在事件名称中使用“on”，如“onmouseover”和“onclick”，如
。但是当您使用
addEventListener
方法时，您会从事件名称中省略“
上的
”

如果您现在将
“onmouseover”
更改为
“mouseover”
，您的代码仍不会按预期运行。这是因为您直接在
addEventListener
的第二个参数中调用函数，而您需要传递一个
回调函数。在您的情况下，只需传递一个匿名函数，如下所示：

rowElement.addEventListener("mouseover", function(){
    alert("A");
}, false);

现在，您的脚本将按预期工作。我希望我的回答对你有帮助。
看看这个
 据我所知，你的问题。你想完成这样的事情

首先生成一行并添加到dom中
您希望附加“onmouseover”事件，并希望简单地发出警报（“A”）
你做错了什么？

rowElement.addEventListener("onmouseover", alert("A"), false);

你做的每件事都很好，但问题出在你上面的代码行记住您只能在事件名称中使用“on”，如“onmouseover”和“onclick”，如
。但是当您使用
addEventListener
方法时，您会从事件名称中省略“
上的
”

如果您现在将
“onmouseover”
更改为
“mouseover”
，您的代码仍不会按预期运行。这是因为您直接在
addEventListener
的第二个参数中调用函数，而您需要传递一个
回调函数。在您的情况下，只需传递一个匿名函数，如下所示：

rowElement.addEventListener("mouseover", function(){
    alert("A");
}, false);

现在，您的脚本将按预期工作。我希望我的回答对你有帮助。
看看这个
 不要将事件侦听器添加到每一行，只需将其添加到表中一次即可。然后，在事件处理程序中，可以使用
event.target
确保事件发生在正确的元素上


函数mouseOverHandler（事件）{
var tr=event.target；
while（tr）{
如果（tr.localName=='tr'）{
打破
}
tr=tr.parentNode；
}
//如果``是事件收件人，则tr将为null
如果（tr）{
log（tr.localName，tr.textContent）；
}
}  
函数AddEventsToTable（表ID）{
var table=document.getElementById（tableId）；
如果（表）{
表.addEventListener（“mouseover”，mouseOverHandler，false）；
}
}
AddEventsToTable（“mytable”）

第1行第1列
第1行第2列
第1行第3列
第1行第4列
第2行第1列
第2行，第2列
一行