jQuery()の挙動を解読する(20) $(args).unbind()、$.event.remove()、$.removeData() 解読 ──jQuery解読(31)

• 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog

jQuery Event 解読 contents
全てのエントリイが ver1.2.2 対応に改訂済みです。

1. Eventオブジェクトの抽象性と特定化・個別化の必要性
2. Event API の概要と $(args).eventtype() メソッド解読
3. $(args).bind()、$(args).one()、$(args).toggle()、$(args).hover() 解読
4. $.event クラスメソッドの概要と $.event.add()、$.data() 解読
5. $.event.handle()、$.event.fix() 解読
6. $(args).trigger()、$(args).triggerHandler()、$.event.trigger() 解読
7. $(args).unbind()、$.event.remove()、$.removeData() 解読
8. $(document).ready(f)、bindReady()、$.ready() 解読
9. $.event.special[t].setup()、$.event.special[t].mouseenter()、$.event.special[t].mouseleave() 解読 (t="type")──これらのメソッドは ver1.2.2 で追加された
10. 終わりに

$(args).unbind() 【ver1.2.2で変化なし】について

イベントの登録メソッドに較べて、それを削除する $(args).unbind() は余り使用頻度の高いメソッドではないでしょう。登録したイベントハンドラーをわざわざ解除する必要性は、決して高いとは思えないからです。

そのことはさて置き、$(args).unbind() メソッドは僅か数行のもので、全ての処理を $.event.remove() メソッドに委ねており、更に $.event.remove() メソッドの骨格は $(args).data() と $(args).removeData() メソッドによって構成されています。

ここでも $(args).add() メソッド同様に、本家サイトで Internals ジャンルに分類されている Data Cache を取り扱うメソッドが不可欠となっています。

$(args).unbind() のコードは以下の通りです。対象要素ノード毎に $.event.remove() を呼び出してその結果を受け取っています。

2199: unbind: function( type, fn ) {
2200: 　return this.each(function(){
2201: 　　jQuery.event.remove( this, type, fn );
2202: 　});
2203: },

$.event.remove() 【ver1.2.2で部分的に変更された】について

引数と変数指定

unbind() メソッドから３つの引数を受け取り、実際にイベントをアンバインドするメソッドです。

elem がテキストノードかコメントだった場合には何もせずに終わります。

1902 行の data() メソッドにより、当該対象要素ノードに対応する Namespaced event handlers をData Cache から抽出し、変数 events に代入します。なお、変数を３つ指定していますが、index はどこでも使われていません。

1896: // Detach an event or set of events from an element
1897: remove: function(elem, type, handler) {
1898: 　// don't do events on text and comment nodes
1899: 　if ( elem.nodeType == 3 || elem.nodeType == 8 )
1900: 　　return;
1901:
1902: 　var events = jQuery.data(elem, "events"), ret, index;
1903:

ここで、events 変数には何が代入されるのか、視覚的にも明らかにしておくことが得策だと思います。

下図はあるサイトのある要素ノードに、クリックとダブルクリックの２つのイベントハンドラーをバインドした時の、Namespaced events handlers と jQuery.js が呼んでいるオブジェクトの一部、つまり jQuery.cache オブジェクトの一部を切り取ったものです。

この図にある events オブジェクトと同じような構造の、「 element 」要素ノードに対応するオブジェクトが 1651 行の変数 events に代入されます。

jQuery ネームスペース内のイベントハンドラー

　　　// 当該対象ノードにイベントハンドラーが登録されていれば
1904: if ( events ) {

　/* 削除その１
　 * 第２引数の type が与えられていない場合の処理である。
　 * この場合には、events オブジェクト内の全ての type プロパティ、つまり登録
　 * されている全てのイベントハンドラー毎に、remove() メソッドを再帰呼び出し
　 * する。再帰的に呼び出す場合には、events オブジェクトから type 名称を取り
　 * だして第２引数としている。
　 * このブロックの処理によって、対象要素ノードに登録されている Namespaced 
　 * イベントハンドラーの全てを削除することになる。
　 */
1905: 　// Unbind all events for the element
1906: 　if ( types == undefined )
1907: 　　for ( var type in events )
1908: 　　　this.remove( elem, type );

　/* イベントオブジェクトが引数となった場合の処理
　 * 「type.type がある場合」とは、何らかの事情によって第２引数の type が
　 * 文字列ではなく、イベントオブジェクトであった場合を指している。
　 * その場合には、handler にはイベントオブジェクトの handler プロパティを
　 * type にはイベントオブジェクトのtypeプロパティを代入している。
　 */
1909: 　else {
1910: 　　// types is actually an event object here
1911: 　　if ( types.type ) {
1912: 　　　handler = types.handler;
1913: 　　　types = types.type;
1914: 　　}

　/* の処理
　 * 複数イベント一括 bind() メソッド に呼応して、unbind()メソッドもマルチ
　 * イベント対応としている。
　 * つまり、各イベントタイプ毎にイテレートして登録解除を進めることになる。
　 * type にはイベントtype名が入る。
　 */
1916: // Handle multiple events seperated by a space
1917: // jQuery(...).unbind("mouseover mouseout", fn);
1918: jQuery.each(types.split(/\s+/), function(index, type){
1919: 　// Namespaced event handlers
1920: 　var parts = type.split(".");
1921: 　type = parts[0];

　/* 削除その２
　 * 次は第２引数の type が与えられていて、それが events オブジェクトの
　 * プロパティと一致する場合── if ( events[type] ) ──の処理である。
　 * 1925行……第３引数 handler が与えられていれば、
　 * 1926行……登録されているプロパティ＝ハンドラー関数を削除する。
　 * ここでは type 名のオブジェクトは削除せず、その handler 名の関数
　 * だけを削除する。
　 * ここに handler.guid プロパティの値はハンドラー関数である。
　 * ※ event.add() メソッド参照。
　 */
1923: 　if ( events[type] ) {
1924: 　　// remove the given handler for the given type
1925: 　　if ( handler )
1926: 　　　delete events[type][handler.guid];
1927:

　 * 削除その３
　 * 第３引数の handler が与えられていない場合には（1929行以下）
　 * events[type] オブジェクト内の各プロパティに対して（1930行）
　 * カスタムイベントがないか(!parts[1])、又は登録されているカスタムイベ
　 * ントタイプと、指定されたカスタムイベントタイプが一致すれば（1932後段）、
　 * handler プロパティを削除する。
　 * これにより指定した type で登録されているイベントハンドラー関数を
　 * 全て削除する。
　 */
1928: 　　// remove all handlers for the given type
1929: 　　else
1930: 　　　for ( handler in events[type] )
1931: 　　　　// Handle the removal of namespaced events
1932: 　　　　if ( !parts[1] || events[type][handler].type == parts[1] )
1933: 　　　　　delete events[type][handler];
1934:

一般のイベントハンドラーの削除

　/* event[type] オブジェクト内にプロパティが残ってないかチェックする。
　 * もし、残っていれば for loop を 中止する。
　 */
1935: 　　// remove generic event handler if no more handlers exist
1936: 　　for ( ret in events[type] ) break;

　/* 削除その４
　 * もし、 event[type] オブジェクト内にプロパティが残っていれば、 
　 * !ret は false となるので 1938行以下は実行されない。
　 * さて、もはや eventsオブジェクトに type プロパティが存在しない場合
　 * ──if ( !ret )──には、一般的なイベントハンドリングによって登録した
　 * ハンドラー関数の登録を解除する。
　 * ここに jQuery.data(element, "handle") はイベントハンドラー登録時に利用
　 * される代理母的な関数である。既に add() 及び handle() メソッドの項で述べ
　 * たように、add()メソッドによってNamespaced イベントハンドラーに登録済みの
　 * 関数から、jQuery.event.handle() メソッドがバインドする関数を選択し登録する。
　 */
1937: 　　if ( !ret ) {
1938: 　　　if ( !jQuery.event.special[type] || jQuery.event.special[type].teardown.call(elem) === false ) {
1939: 　　　　if (elem.removeEventListener)
1940: 　　　　　elem.removeEventListener(type, jQuery.data(elem, "handle"), false);
1941: 　　　　else if (elem.detachEvent)
1942: 　　　　　elem.detachEvent("on" + type, jQuery.data(elem, "handle"));
1943: 　　　}
1944: 　　　ret = null;
1945: 　　　delete events[type];
1946: 　　}
1947: 　}
1948:  });
1949: }

　/* 削除その５
　 * 最後の処理は再び Data Cache オブジェクト内のクリーニングである。
　 * これまでの処理で全てのイベントハンドラー（タイプ、カスタムイベント、
　 * ハンドラー関数、id 番号など）を削除するが、まだ Data Cache オブジェク
　 * ト内には残存物がある。それは events と handle オブジェクトである。
　 * これらを以下の数行で削除する。
　 * ret がないことつまり events オブジェクト内が空であることを確認して、
　 * events と handle オブジェクトを削除する。
　 * 以上の結果、当該要素ノードelementに関してData Cache オブジェクト内に
　 * 存在するオブジェクトは、当該要素ノードに対応するuuid番号を振られた空
　 * のオブジェクトだけとなる。
　 */
1951: 　　// Remove the expando if it's no longer used
1952: 　　for ( ret in events ) break;
1953: 　　　if ( !ret ) {
1954: 　　　　var handle = jQuery.data( elem, "handle" );
1955: 　　　　if ( handle ) handle.elem = null;
1956: 　　　　　jQuery.removeData( elem, "events" );
1957: 　　　　　jQuery.removeData( elem, "handle" );
1958: 　　　　}
1959: 　}
1960: },

▲ToTop

jQuery.removeData( elem,name ) 【 ver1.2.2 で変化なし】解読

jQuery.removeData() メソッドは、jQuery.data()メソッドで構築した Data Cache オブジェクト内のオブジェクトを削除するためのもので、jQuery.event.remove()メソッドの最後に登場します。その働きは既に上で述べたので、ここでは当該メソッドの解読を行ってこのエントリイを閉めます。

コード全体は name 引数がある場合とない場合の２通りに大別されます。

変数初期化

668: removeData: function( elem, name ) {
669: 　elem = elem == window ?
670:　　　 windowData :
671:　　　 elem;
672:

　/* data() メソッドで elem, name を登録する時に、elemには、expando
　 * プロパティが付与される。
　 * （ data() メソッドの 518行 id = elem[ expando ] = ++uuid;）
　 * ここではこれを取りだして改めて地域変数 id に代入している。
　 * なお、この id は先の 518 行により、個々の elem に対応して
　 * cache オブジェクト内のプロパティとして割り振られているので、
　 * cache[id]とすれば 当該 uuid番号 のプロパティ値を指すことになる。
　 * 勿論 elem の指定ミスがあればこの行は通過し、540行でも撥ねられ、
　 * その先に進んでも全てスルーする。
　 * また name がないか間違っている場合も全ての行がスルーされる。
　 */
673: 　var id = elem[ expando ];
674:

削除その１──cache.id オブジェクト内のプロパティ削除

　/* 抽出された id 番号を頼りに、その中にある name プロパティを削除する。
　 * 1697、1698 行の引数に置き換えれば events と handle を削除することに
　 * なります。
　 */
675: 　// If we want to remove a specific section of the element's data
676: 　if ( name ) {
677: 　　if ( jQuery.cache[ id ] ) {
678: 　　　// Remove the section of cache data
679: 　　　delete jQuery.cache[ id ][ name ];
680:

削除その２── element に対応する id 番号名のオブジェクト削除

　/* id オブジェクト内に何もないことを確認し（546行）、
　 * なければ（547行）、elem つまり当該 elementに対応する id 番号名のオブ
　 * ジェクトそのものを、removeData()を再帰呼び出しして削除する。（548行）
　 * なお 548 行を 564 行と同様のコードとしなかったのは、別の name 名のオブ
　 * ジェクトが残っているケースもあるため、これに配慮したものと推測される。
　 * 例えば、events オブジェクトを削除する段階では、まだ handle オブジェクト
　 * が残っている。（1697-1698行参照）
　 */
681: 　　　// If we've removed all the data, remove the element's cache
682: 　　　name = "";
683:
684: 　　　for ( name in jQuery.cache[ id ] )
685:　　　　 break;
686:　 　　　if ( !name )
687: 　　　　jQuery.removeData( elem );
688: 　　}
689:

削除その3──elemオブジェクトのexpando プロパティ削除 及び cache 内の elem id プロパティ削除

　/* name 引数が与えられなかった場合の処置
　 * elem の expando プロパティ削除を行う（556行）。
　 * IE ではエラーが発生するのでDOMの removeAttribute メソッドを使って
　 * elem の expando プロパティを削除する。
　 * 最後に cache オブジェクト内の id プロパティを削除し、elem に対応する
　 * cache オブジェクト内の全ての痕跡を消し去る。
　 */
691: 　// Otherwise, we want to remove all of the element's data
692: 　} else {
693: 　　// Clean up the element expando
694: 　　try {
695: 　　　delete elem[ expando ];
696: 　　} catch(e){
697: 　　　// IE has trouble directly removing the expando
698: 　　　// but it's ok with using removeAttribute
699: 　　　if ( elem.removeAttribute )
700: 　　　　elem.removeAttribute( expando );
701: 　　}
702:
703: 　　// Completely remove the data cache
704: 　　delete jQuery.cache[ id ];
705: 　}
706: },