4

テーブル内の「onmouseover」イベントリスナーを減らしようとしています（ホバーの行を強調表示しています）。これを行うには、各<tr>ではなくテーブル全体にイベントリスナーをアタッチします（これが現在の方法です）。その理由は、IEの反応が非常に遅く、これに対する唯一の答えは、イベントリスナーの数を減らすことでした。

サンプルコード：

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

このシナリオでは、2番目の<tr>にカーソルを合わせると、「onmouseover」イベントがtrからテーブルにバブルすることがわかります。

jQuery $（'＃myTable'）。mouseoverイベントで、どのtrがホバーされたかを確認し、そのcssクラスを変更するにはどうすればよいですか？

編集：これのアイデアはこのSOの質問から来ています（しかし残念ながら答えにはソースコードがありません）：IEで複数のOnMouseOverイベントを高速化する

4

2 に答える 2

8

これは、イベント委任と呼ばれます。

<tr>jQueryを使用しているため、次の方法でイベントのトリガー要素を簡単に見つけることができますclosest。

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

closest実際、このようなイベントの委任をサポートするために作成されました。それlive()は内部で使用するものです。

于 2009-09-23T01:53:13.660 に答える
0

マウスオーバーイベントをテーブルにアタッチできますが、テーブルの子要素をマウスオーバーするたびに、その関数が起動します。

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

これにより、ホバーされた要素のtrが取得されます。

于 2009-09-23T01:51:05.240 に答える