JQuery event bubbling: get the original mouse pointer (to highlight the table row)

Question

I am trying to reduce my onmouseover event listeners in my table (in which I highlight lines on hover). I want to do this by associating an event listener with the whole table, and not with each <tr> (as I have now). The reason is that IE responds very slowly, and the only answer I found was to reduce the number of event listeners.

Code example:

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

code>

In this case, if I hang over the second <tr>, I understand that the onmouseover event is bubbling from tr to the table.

How can I find out in jQuery $ ('# myTable'). mouseover event that tr hung and changed its css class?

Change The idea for this comes from this SO question (but unfortunately there is no source code in the answer): Speeding up several OnMouseOver events in IE

Answer 1

He called event delegation .

You are using jQuery, which is why it is trivial to find the trigger element of the <tr> event through closest :

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

closest was actually written to support such event delegation. This is what live() uses internally.

Answer 2

You can attach a mouseover event to a table, but every time you hover over a mouse with a child of a table whose function will fire.

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

This will give you the tr element that was visible.