jQueryコード最適化の基本イベント

イベントモデルはイベントといえば、ネットシーンとマイクロソフトの「ブラウザ大戦」にさかのぼる.当時、イベントモデルにはまだ基準がなく、両社の実現が事実基準だった.ネットビューはNavigatorで「イベントキャプチャ」のイベントシステムを実現し、マイクロソフトはIEで「イベントバブル」という基本的に逆のイベントシステムを実現した.この2つのシステムの違いは,イベントが発生すると,関連要素がイベントを処理(応答)する優先度が異なることである.
この2つのイベントメカニズムの違いを例に挙げて説明します.ドキュメントには次のような構造があるとします.

 
  
 
  
 
  
... 
  
 
  
 
  
 
 

この3つの要素はネストされているので、aをクリックし、実際にはspanとdivをクリックします.すなわち、この3つの要素は、クリックイベントを処理する機会があるはずです.イベントキャプチャメカニズムの下で、このクリックイベントを処理する優先順位はdiv>span>aである.イベントバブルメカニズムの下で、このクリックイベントを処理する優先順位は、a>span>divである.
その後、W 3 Cの仕様では、ブラウザがキャプチャとバブルメカニズムを同時にサポートし、開発者がイベントをどの段階に登録するかを選択できるようにする必要があります.そこで、次の登録イベントの標準的な方法があります.
target.addEventListener(type, listener, useCapture Optional );
次のようになります.
◆type:リスニングのイベントタイプを示す文字列
◆listener:Listenerオブジェクト(JavaScript関数)は、指定したイベントが発生したときに通知を受け取ることができます
◆useCapture:ブール値、取得フェーズに登録するか
実際のアプリケーション開発では、IE(キャプチャがサポートされていないため)との互換性を確保するために、useCaptureは一般的にfalse(デフォルト値もfalse)として指定される.すなわち、イベントのみをバブルフェーズに登録する.上記の簡単な例では,応答順序はa>span>divである.
泡立ちの副作用
前述したように,IEのバブルイベントモデルは基本的に事実上の基準となっている.しかし、泡が出るには副作用があります.
前のドキュメント構造を例にとると、インタフェースのメニュー項目であると仮定し、ユーザーのマウスがdivから離れたときにメニューを非表示にしたいと考えています.そこでdivにmouseoutイベントを登録しました.ユーザーマウスがdivから離れている場合は、すべてが正しいです.ユーザマウスがaまたはspanから離れている場合、問題が発生します.イベントバブルのため、この2つの要素から割り当てられたmouseoutイベントがdivに伝播し、マウスがdivから離れず、メニューが事前に非表示になります.
もちろん、泡立ちの副作用は避けられません.例えば、div内部の各要素にmouseoutイベントを登録し、使用する.stopPropagation()メソッドは、イベントのさらなる伝播を阻止します.IEの場合、イベントオブジェクトのcancelBubbleプロパティをfalseに設定し、イベントバブルをキャンセルする必要があります.しかし、ブラウザの互換性の問題を自分で処理する古い道に戻った.
最適化シナリオ
バブルの副作用を避けるために、jQueryはmouseenterとmouseleaveイベントを提供しているので、mouseoverとmouseoutの代わりに使用しましょう.
次のjQueryの内部関数withinElementから抜粋すると、mouseenterとmouseleaveをサポートします.注釈を翻訳して、皆さんの参考にしてください.

 
  
//                           
  
//   jQuery.event.special.mouseenter   mouseleave         
  
var withinElement = function( event ) { 
  
//    mouse(over|out)             
  
var parent = event.relatedTarget; 
  
//           
  
event.type = event.data; 
  
// Firefox       relatedTarget      XUL    
  
//       ，      parentNode    
  
try { 
  
// Chrome    ，       parentNode    
  
//       null 
  
if ( parent && parent !== document && !parent.parentNode ) { 
  
return; 
  
} 
  
//   DOM     
  
while ( parent && parent !== this ) { 
  
parent = parent.parentNode; 
  
} 
  
if ( parent !== this ) { 
  
//                 ，  ，      
  
jQuery.event.handle.apply( this, arguments ); 
  
} 
  
//          ，            XUL    
  
} catch(e) { } 
  
}, 
  
 
 

結論
jQueryでは、mouseenterとmouseleaveイベントを使用して、イベントの泡の副作用を避けることができます.
原文:http://www.ituring.com.cn/article/420