jQueryコードの基本イベントoptimization_jquery

イベントモデル

イベントと言えば、Netscape と Microsoft の間の「ブラウザ戦争」に遡ります。当時はイベントモデルの標準が存在せず、両社の実装がデファクトスタンダードとなっていました。 Netscape は Navigator に「イベント キャプチャ」イベント システムを実装しましたが、Microsoft は基本的に反対のイベント システム「イベント バブリング」を IE に実装しました。これら 2 つのシステムの違いは、イベントが発生したとき、そのイベントを処理 (応答) する際の関連要素の優先順位が異なることです。

次の例は、これら 2 つのイベント メカニズムの違いを示しています。ドキュメントの構造が次のとおりであるとします。

target.addEventListener(type,listener, useCapture Optional);

ここで:

◆ type: string を示します。監視するイベントの種類

◆listener: 指定したイベント発生時に通知できるリスナーオブジェクト(JavaScript関数)

◆ useCapture: ブール値、キャプチャフェーズに登録するかどうか

実際のアプリケーション開発では、IE との互換性を確保するため (キャプチャをサポートしていないため)、useCapture を false に指定することが一般的です (デフォルト値も false)。つまり、上記の単純な例では、イベントをバブリング ステージに登録するだけです。応答の順序は次のとおりです。


バブリングの副作用


上で述べたように、IE のバブリング イベント モデルは基本的にデファクトスタンダードとなっています。しかし、泡立ちには副作用があります。 引き続き前のドキュメント構造を例として取り上げ、それがインターフェイス内のメニュー項目であると仮定すると、ユーザーのマウスが div から離れたときにメニューを非表示にする必要があります。そこで、div に Mouseout イベントを登録しました。ユーザーが div からマウスを離すと、すべてが正しいことになります。そして、ユーザーのマウスが a または Span から離れると、問題が発生します。イベント バブリングにより、これら 2 つの要素から送出されるマウスアウト イベントが div に伝播され、マウスが div から離れなくなり、メニューが事前に非表示になるためです。

もちろん、バブリングによる副作用を避けるのは難しくありません。たとえば、div 内の各要素のマウスアウト イベントを登録し、.stopPropagation() メソッドを使用してイベントがさらに広がるのを防ぎます。 IE の場合、イベント バブルをキャンセルするには、イベント オブジェクトの cancelBubble プロパティを false に設定する必要があります。ただし、これは依然として、ブラウザーの非互換性の問題に自分で対処するという古い道に戻ります。


最適化計画


バブリングの副作用を回避するために、jQuery は、mouseover と Mouseout の代わりに、mouseenter と Mouseleave イベントを提供します。 以下は、mouseenter と Mouseleave のサポートを提供する jQuery の内部関数 insideElement からの抜粋です。コメントは参考のためにのみ翻訳されています。




コードをコピー var insideElement = function(event) { 原文: http://www.ituring.com.cn/article/420