javascript - jQuery 事件冒泡 : Get original element mouseover (for table row highlighting)

Question

我正在尝试减少表格中的“onmouseover”事件监听器(我在表格中突出显示悬停的行)。我想通过将事件监听器附加到整个表而不是每个 来做到这一点(这就是我现在的方式)。原因是 IE 的 react 非常慢，我找到的唯一解决办法是减少事件监听器的数量。

示例代码:



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



在这种情况下，如果我将鼠标悬停在第二个 上，我知道“onmouseover”事件从 tr 冒泡到表格。

我如何在我的 jQuery $('#myTable').mouseover 事件中找出悬停了哪个 tr 并更改其 css 类？

编辑:这个想法来自这个 SO 问题(但遗憾的是答案中没有源代码):Speeding Up Multiple OnMouseOver Events in IE

Answer 1

它叫做 event delegation .

您使用的是 jQuery，这使得查找触发 <tr> 变得微不足道。事件元素，来自 closest :

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

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