Question

嗨，我动态地在列表中插入行。现在，只需点击一下按钮即可，但最终数据将来自数据库。这很好用！

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

问题部分在这里::

res.send('success')

JSFiddle代码的解释：

1.单击Generate List按钮添加行。

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

3。单击AddEvents以生成事件。 这是无效的代码部分

AddEvents调用

AddEventsToTableForEachRow（'tblTestList'）

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

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

实际上，如前所述，立即调用AddEventsToTableForEachRow中的警报函数，并且鼠标悬停时没有任何操作。

对于那些质疑为什么我没有使用jquery的人：一个。我是JS / HTML / CSS的新手。我来自C / C ++背景，并且因为使用HTML / CSS / JS轻松构建UI而来到这一方。湾我正在学习，发现DOM更清洁，更容易理解。但是在这个问题上花了3天之后，我已经为任何事情做好了准备。（但如果我得到基于DOM的解决方案，会更高兴！）

提前致谢。

亲切的问候， Aditya

Answer 1

不是将事件侦听器添加到每一行，只需将其添加到表中即可。然后，在您的事件处理程序中，您可以使用1234来确保事件发生在正确的元素上。

＆＃13;

event.target

＆＃13;

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

＆＃13;

当鼠标移动到任何表子项上时，这会导致事件触发，但我使用while循环将事件目标转换为适当的<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>。

Answer 2

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

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

Answer 3

据我了解你的问题。你想要完成这样的事情。

您首先生成一行并添加到dom。
你想附上＆＃34; onmouseover＆＃34;事件并且只想提醒（＆＃34; A＆＃34;）。

你做错了什么？

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

你做的一切都很好，但问题出在上面的代码行中。 REMEMEBER 您只使用＆＃34; on＆＃34;事件名称如＆＃34; onmouseover＆＃34;和＆＃34; onclick＆＃34;内部像<h1 onclick="doSomething()"></h1>。但是当您使用addEventListener方法时，您会从事件名称中省略"on"。

如果您现在将"onmouseover"更改为"mouseover"，您的代码仍然无法运行，因为您预计它会运行。这是因为您直接在addEventListener的第二个参数中调用该函数，而您需要传递callback function。在您的情况下，您可以简单地传递一个匿名函数，如下面的行：

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

现在您的脚本将按预期工作。我希望我的回答对你有所帮助。看看这个fiddle。

Answer 4

我会更改以下行：

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

到

 rowElement.onmouseover = function() { alert("A"); };

修改过的小提琴：https://jsfiddle.net/ywvv0brv/

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

4 个答案: