jQuery 事件冒泡：获取原始元素 mouseover（用于表格行突出显示）答案

【问题标题】：jQuery event bubbling: Get original element mouseover (for table row highlighting)jQuery 事件冒泡：获取原始元素 mouseover（用于表格行突出显示）
【发布时间】：2009-09-23 01:30:51
【问题描述】：

我正在尝试减少表中的“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 类？

编辑：这个想法来自这个 SO question（但不幸的是答案中没有源代码）：Speeding Up Multiple OnMouseOver Events in IE

【问题讨论】：

标签： javascript jquery css event-bubbling

【解决方案1】：

它叫event delegation。

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

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

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

【讨论】：

“e”参数是干什么用的？有必要吗？它代表什么？
@Alex：e参数是mouseover生成的event对象。每个用户操作都会生成这些事件之一。见quirksmode.org/js/events_properties.html
@Alex：ps 我已经编辑了答案以使用比"e" 更好的变量名称；）
你不能用$(this)代替$(event.target)吗？
@Timwi $(this) 在这种情况下相当于 $('#myTable'); event.target 是链上最低的元素，因此找到最接近的将匹配您想要的元素。

【解决方案2】：

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

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

这将为您提供悬停元素的 tr。

【讨论】：

或者你可以$('#myTable tr').mouseover(function(e){ $(e.target); });
@Pierre：首选通常是有一些委托或冒泡的事件处理程序，而不是直接连接到元素的大量单独的处理程序，所以这不是比显示的更好的选择。
@GoneCoding 我同意！这是在我知道我现在所知道的之前发布的。永远不要太老去学习！