Question

我正在尝试减少我的表中的'onmouseover'事件侦听器（我在其中突出显示悬停时的行）。我想通过将事件监听器附加到整个表而不是每个＆lt; tr＆gt;来实现这一点。（这就是我现在的方式）。原因是IE反应非常缓慢，我发现的唯一答案是减少事件监听器的数量。

示例代码：



<table id="myTable">
   <tr>
     <td>Somedata</td>
   </tr>
   <tr>
     <td>Somedata 2</td>
   </tr>
   <tr>
     <td>Somedata 3</td>
   </tr>       
</table>

<table id="myTable"> <tr> <td>Somedata</td> </tr> <tr> <td>Somedata 2</td> </tr> <tr> <td>Somedata 3</td> </tr> </table>

在这种情况下，如果我将鼠标悬停在第二个＆lt; tr＆gt;上，我就会明白“onmouseover”事件会从tr冒泡到表格。

我怎样才能找到我的jQuery $（'＃myTable'）。mouseover事件哪个tr被徘徊并改变它的css类？

修改：这个想法来自这个问题（但遗憾的是答案中没有源代码）：Speeding Up Multiple OnMouseOver Events in IE

Answer 1

它被称为event delegation。

你正在使用jQuery，通过closest找到事件的触发<tr>元素是微不足道的：

$('#myTable').mouseover(function(event) {
    var tr = $(event.target).closest('tr');
    // do something with the <tr> element...
})

closest实际上是为支持这样的事件委托而编写的。这是live()内部使用的内容。

Answer 2

您可以将鼠标悬停事件附加到表格中，但每次鼠标悬停在该表格中的任何子元素时，该功能都会触发。

$('#myTable').mouseover(function(e) {
  $(e.target).parents('tr');
});

这将使你获得悬停的元素。

jQuery事件冒泡：获取原始元素鼠标悬停（用于表行突出显示）

2 个答案: