コードをコピーします
コードは次のとおりです:
Item1 | ;ValueValue1
すべての tr のイベント バインディングを記述するだけです。ただし、これには次の問題もあります。 1. ページ上のコードの量が増加します。 2. テーブルがバックグラウンド サーバー プログラムによって出力される場合、JavaScript 関数を tr 要素にバインドできない場合があります。何をするか？直接的に考えると、js を使用してページの特定の範囲でこのスタイルのテーブルを検索し、tr イベントをバインドできます。しかし、今日は考え方を変えて、js イベントをテーブル要素に直接バインドして、特定の行を強調表示してみましょう。
この考えには十分な根拠があります。これはブラウザのイベント モデルについて話さなければなりません。歴史的な理由により、さまざまなブラウザーで JavaScript イベント応答の実装方法に違いがありますが、基本的な考え方は同じです。 js イベントは、W3C DOM でキャプチャ バブル モデルとして記述されます。簡単に言うと、餃子を作るのと似ています。餃子は徐々に鍋の底に沈み、熱を受け入れてゆっくりと上に浮き上がります。モデル自体に戻ると、JavaScript イベントには 2 つの主要なカテゴリがあります。まず、最も外側の要素からイベントをキャプチャし、それをイベントをトリガーした要素に徐々に内部に渡します。これはイベント キャプチャと呼ばれ、次に徐々に外側に拡張されます。外側の要素 - これはイベント バブリングと呼ばれます。 IE の実装はキャプチャ タイプのイベントをサポートしていません。また、バブリング イベントの実装は W3C DOM 標準とは若干異なりますが、全体的な考え方は同じです。
長い間話してきましたが、テーブルの行を強調表示するという目的を達成するために、イベント バブリング処理メカニズムを使用したいだけです。
再び、泡立つイベントは、ちょうど石によって引き起こされる波紋のように、JavaScript イベントをトリガーする最も内側の要素から外側の層に広がります。マウスが特定の行上をスライドすると、最初に td 内のテキストやその他の要素などの最も内側の要素がマウスオーバーをトリガーし、次にそれが td-->tr-->tbody-->table に渡されて、マウスオーバー イベントが発生し、マウスが外に移動すると、この連続的なバブリング プロセスも発生します。これが私たちがインシデント対応者にアプローチする方法です。
まず、XHMTL のイベント バインディング コードを変更する必要があります。 tr 要素内の Mouseover および Mouseout イベント処理を削除し、テーブルにイベント処理を追加します。最終的なテーブルは次のようになります。
<テーブルクラス = "データテーブル" セルスペース = "0" onmouseover = "highlightTr();">
アイテム
| ItemItem1 |
ValueValue1 |
;td> ;ItemItem2
ValueValue2 |
;ValueValue3 |
ValueValue4 |
ValueValue5 |
ItemItem6 | td>ValueValue6
