I'm trying to reduce my 'onmouseover' event listeners in my table (in which I highlight rows on hover). I want to do this by attaching an event listener to the entire table instead of each <tr> (that's how I have it now). The reason is that IE is reacting very slow and the only answer I found to this was to reduce the number of event listeners.
Sample code:
<table id="myTable">
<tr>
<td>Somedata</td>
</tr>
<tr>
<td>Somedata 2</td>
</tr>
<tr>
<td>Somedata 3</td>
</tr>
</table>
In this scenario, if I hover over the second <tr>, I understand that the "onmouseover" event bubbles from tr to the table.
How could I find out in my jQuery $('#myTable').mouseover event which tr was hovered and change its css class?
Edit: The idea for this comes from this SO question (but unfortunately no source code in the answer): Speeding Up Multiple OnMouseOver Events in IE
It's called event delegation.
You're using jQuery which makes it trivial to find the triggering <tr>
element of the event, via closest
:
$('#myTable').mouseover(function(event) {
var tr = $(event.target).closest('tr');
// do something with the <tr> element...
})
closest
was in fact written to support event delegation like this. It's what live()
uses internally.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With