jQuery事件冒泡:获取原始元素mouseover (用于表行突出显示)

Question

我正在试图减少表中的“onmouseover”事件侦听器(在该表中，我在悬停时突出显示行)。我想通过将事件侦听器附加到整个表而不是每个表来实现这一点(这就是我现在的做法)。原因是IE的反应非常慢，我找到的唯一答案就是减少事件侦听器的数量。

样本代码：

​

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

​

在这种情况下，如果我悬停在第二个，我知道"onmouseover“事件气泡从tr到表。

如何在jQuery $('#myTable').mouseover事件中发现tr被悬停并更改其css类？

编辑：这个想法来自于这样的问题(但不幸的是，答案中没有源代码)：在IE中加速多个OnMouseOver事件

Answer 1

它叫事件委托。

您使用的是jQuery，这使得通过closest查找事件的触发<tr>元素变得非常简单

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

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

Answer 2

您可以将mouseover事件附加到表上，但每次您在表的任何子元素上鼠标操作时，该函数都会触发。

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

这样你就可以得到悬浮元素的tr。