jQueryの読み込みその11 イベントコアの追加method_jquery

この記事のソースコードを見てみましょう。追加定義は次のとおりです（ほとんど省略しています）

コードをコピー コードは次のとおりです:

add: function( elem, Types, handler, data ) {
if ( elem.nodeType === 3 || elem.nodeType === 8 ) {
return;
}
...
}

は、HTMLElement、イベント タイプなどの 4 つのパラメータ elem、type、handler、data を定義します。クリック）、イベント応答関数、データをそれぞれ指定します。さらに、型はスペースで区切られた複数のイベント (「mouseover Mouseout」) を渡すことができます。ハンドラーはオブジェクトである場合があります (ライブ実装時)。データは最終的に、展開されたイベント オブジェクトに、つまりイベントの属性としてハングされます。イベントはハンドラーの第一パラメータとして取得されるため、ハンドラー内でデータを取得することができます。
詳細は以下をご覧ください

コードをコピーします コードは次のとおりです。

if ( elem. nodeType = == 3 || elem.nodeType === 8 ) {
return;
}

テキストノードとコメントノードが直接返されます。

コードをコピー コードは次のとおりです。

if ( handler === false ) {
handler = returnFalse;
} else if ( !handler ) {
// jdalton が推奨する修正。
return;パラメータハンドラは false の場合、ハンドラを returnFalse に割り当てます。returnFalse は次のような関数です

コードをコピーします

コードは次のとおりです function returnFalse() { return false;

}

jQuery は、ハンドラーを次のように設定することで要素のデフォルトの動作を防止し、イベントのバブリングを停止します。間違い。これは、jQuery.event.handle と組み合わせて表示する必要があります。

コードをコピーします

コードは次のとおりです。 ( handler. handler ) { handleObjIn = handler; handler = handleObjIn.handler; } // 実行される関数に一意の ID があることを確認します

if ( !handler. guid ) {

handler.guid = jQuery.guid;
}


変数 handleObjIn、handleObj を定義します。
Handler は文字通りイベント応答 (コールバック) 関数ですが、ここに handler.handler があると人々は奇妙に感じます。つまり、ハンドラーはいつ JS オブジェクトとして渡されるのでしょうか?
ほとんどの場合、Function タイプが渡されます。ソース コード内の jQuery.event.add の呼び出しを見ると、jQuery がライブ実装時に Object タイプを渡すことがわかります。以下のように

コードをコピー


コードは次のとおりです。

add: function( handleObj) { jQuery .event.add( this, liveConvert( handleObj.origType, handleObj.selector ), jQuery.extend({}, handleObj, {handler: liveHandler, guid: handleObj.handler.guid} ) ); },

このとき、handleObjIn には渡された JS オブジェクトの値が代入されますが、実際のハンドラーは handleObjIn.handler です。これは少し複雑なので、時間をかけて理解してください。




コードをコピー

コードは次のとおりです:

// 関数が実行されていることを確認してください。一意の ID があります if ( !handler.guid ) { handler.guid = jQuery.guid ; }

渡されたパラメーター ハンドラーは属性 guid を追加します。増分は 1 から始まるため、数値。 jQuery を使用してイベントを追加した場合でも、デフォルトで属性 guid がイベント応答関数に追加されます。この GUID は、イベントを削除するときに使用されます。

コードをコピー

コードは次のとおりです:

// 要素のイベント構造体を初期化します var elemData = jQuery._data( elem ); まず elemData を取得します。ここでは前述の jQuery._data が使用されます。初めてイベントが HTMLElement に追加されるとき、elemData は空のオブジェクト ({}) です。

コードをコピー

コードは次のとおりです:

// elemData が見つからない場合は、
// 禁止されている noData 要素の 1 つにバインドしようとしている必要があります。
if ( !elemData ) {
return;

elemData が存在しない場合は、直接返されます。

コードをコピー コードは次のとおりです:

var events = elemData.events,
eventHandle = elemData.handle;

イベント、eventHandle を定義します。また、初めての場合、両方の変数が未定義です。

コードをコピー コードは次のとおりです。

if ( !events ) {
elemData.events = events = {};
}
if ( !eventHandle ) {
elemData.handle =eventHandle = function( e ) {
// jQuery.event の 2 番目のイベントを破棄します.trigger( ) および
// ページがアンロードされた後にイベントが呼び出されたとき
return typeof jQuery !== "unknown" && (!e || jQuery.event.triggered !== e.type) ?
jQuery.event.handle.apply(eventHandle.elem, argument ) :
未定義;
}


elemData.events に値を代入します。およびelemData.handle。

コードをコピー コードは次のとおりです:

// 要素をプロパティとして追加します。 handle function

// これは、IE の非ネイティブ イベントによるメモリ リークを防ぐためです。
eventHandle.elem = elem;


イベント ハンドルにスタンバイ要素が追加されると削除されます。イベント登録が削除される 一部のブラウザでのメモリ リークを避けるために null に設定します。

コードをコピー コードは次のとおりです:

// スペースで区切られた複数のイベントを処理します

// jQuery(...).bind("mouseover Mouseout", fn);
types = types.split(" ");


スペースを含む文字列を変換します。カッターをアレイに入れます。この文により、複数のイベントを一度に追加でき、複数のイベントのハンドラーは同じになります。

の後には while ループが続きます

コードをコピー コードは次のとおりです:

while ( (type = type[ i ]) ) {

handleObj = handleObjIn ?
jQuery.extend({}, handleObjIn) :
{ ハンドラー: ハンドラー, データ: データ }; .
}



のように順番に処理される配列をループし、handleObj

を取得し、ピリオド (.) で区別されるイベント名前空間を処理します。 type にドットがある場合は名前空間があり、それ以外の場合は type 属性と guid 属性を handlerObj に追加します。
は、ハンドラーとスペシャルを取得するためにこれらの後続のイベントを削除するときに使用されます。ほとんどの場合、イベントの追加には addEventListener/attachEvent が使用されます。変数specialから、ready、beforeunload、liveイベントなどの特別なイベントが特別に処理されることがわかります。 ready は jQuery.bindReady を呼び出しますが、jQuery.bindReady は引き続き内部で addEventListener/attachEvent を呼び出します。 beforeunload は window.onbeforeunload を使用して追加されます。 Liveではイベントデリゲーションが実装されており、その処理も特殊です。
、最後に handleObj を配列ハンドルに追加します。
jQuery.event.add の最後の文は、IE のメモリ リークを解決します。




コードをコピー

コードは次のとおりです: // メモリ リークを防ぐために要素を null 化します。 IE elem = null;

jQueryのイベント管理のデータ構造を図にしてみました。以下の通り