0

以下のようなブラウザツリーがあります。各ノードは、個別の ID を持つ div 要素です。マウスがノードの上に置かれたときにスタイルを変更したい。そして、ユーザーがノードを左クリックまたは右クリックしたときに何かを行います。 ここに画像の説明を入力

質問 1: 一部のドキュメントでは、:hover セレクターにパフォーマンスの問題があると書かれています。そのため、代わりに mouseover および mouseout イベントをリッスンします。この方法は推奨されますか？

私の要件を実装するために、各ノードのマウスオーバー、マウスアウト、クリック、およびコンテキストメニューのイベントをリッスンしたいと考えています。私には2つの解決策があります。1 つ目は、イベント ハンドラーを各ノードにバインドすることです。2 つ目は、イベント ハンドラーをルート ノードにバインドするだけです。イベントがルート ノードにバブルされると、ハンドラーが呼び出されます。

質問 2: 2 つのソリューションについて、どちらのパフォーマンスが優れていますか?

4

1 に答える 1

1

CSS は一般に、ホバーのパフォーマンスが JavaScript よりも優れており、よりネイティブであり、保守がはるかに簡単です (パフォーマンスはクライアント テクノロジに限定されません。コードを保守する人間のパフォーマンスはどうでしょうか?)。

使用されている HTML によっては、JavaScript でホバー効果をシミュレートすることが、古いブラウザーでサポートするために必要になる場合があります (リンクで使用する場合は:hover常に問題ありません)。

イベント バブリングは、複数のイベント ハンドラー インスタンスよりも優れたパフォーマンスを発揮します。 http://icant.co.uk/sandbox/eventdelegation/

ホバーを使用して新しいコンテンツを展開/折りたたむことはできませんが、アクセスできないだけです。展開/折りたたみは常にリンク要素のクリックイベントからトリガーする必要があります (ちなみに、あなたのようには聞こえません)。

于 2012-09-26T09:49:44.837 に答える