jQuery()の挙動を解読する(17) $.event.handle()、$.event.fix() 解読──jQuery解読(28)

• 「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. 終わりに

$.event.handle() 【 ver1.2.2では可読性を高める変更以外の変更なし 】 解読

このメソッドはあるイベントが発生した時に、それに対応するイベントハンドラー関数をイベントハンドラーリストから選択／抽出し、かつ実行させるメソッドです。なお、このメソッドの起動は次のように複雑な過程を辿ります。

イベント発生時には、(1) addEventListner() メソッド 又は attachEvent() メソッドから add() メソッドによって定義された地域変数 handle が呼び出され、(2) この handle に data()メソッドによって代入された関数（ jQuery.event.handle.apply(element,auguments)……1620行 ）が起動され、そこから jQuery.event.handle() メソッドが呼び出されます。

2025: handle: function(event) {
2026: 　// returned undefined or false
2027: 　var val;　//undefined
2028:

　/* 2029 行はevent オブジェクトの正規化とでも呼ぶことが相応しいコードです。
　 * (1) event || window.event || {}  で引数 event をクロスブラウザ対応とし、
　 * (2) その結果を引数として fix に渡して、イベントオブジェクトを正規化する。
　 * ここに「正規化」とは W3C 準拠の表現で統一することを意味しており、つまり
　 * 各種のイベントオブジェクトのプロパティとメソッドをクロスブラウザ対応表現
　 * に統一することを指している。
　 * 左辺のオブジェクト event には、プロパティとメソッドの全てがクロスブラウザ
　 * 対応済みに補正されたイベントオブジェクトが代入される。
　 */
2029: 　// Empty object is for triggered events with no data
2030: 　event = jQuery.event.fix( event || window.event || {} );
2031:

　/* 正規化前も後も、event オブジェクトには type プロパティが存在している。
　 * 但し、このプロパティには、カスタム名称付き（存在していれば）のイベント
　 * タイプ名称が add() メソッドにより代入されている。1762-1763 行はこのプロ
　 * パティ値からカスタム文字列を排除し、イベント名称だけを取り出すものである。
　 * event.type プロパティ には、標準のイベント名文字列だけが代入される。
　 */
2032: 　// Namespaced event handlers
2033: 　var parts = event.type.split(".");
2034: 　event.type = parts[0];
2035:

　/* ２つの data() メソッドによって、jQuery.cache オブジェクト内に登録済みの
　 * イベントハンドラー（イベントタイプと data プロパティ付きのイベントハンド
　 * ラー関数）を検出し、そのイベントハンドラー関数（[event.type]で特定される）
　 * を地域変数 c に代入する。（※　この「検出」過程は別途詳細に述べる予定。）
　 * 地域変数 args には引数オブジェクト arguments の２番目以降を抽出した結果を
　 * 代入する。
　 * 次に1766 行において 1759 行で定義した event オブジェクトを args 配列の先頭
　 * に代入する。こうして正規化される前の event オブジェクトを args から除外し、
　 * 替わりに 正規化済みの event オブジェクトに入れ替えることになる。
　 * つまり arge[0] には正規化済みの event オブジェクトが代入される。
　 */
2036: 　var handlers = jQuery.data(this, "events") && jQuery.data(this, "events")[event.type], 
　　　　args = Array.prototype.slice.call( arguments, 1 );
2037: 　args.unshift( event );
2038:

　/* 或る対象ノードに登録されている１つのイベントタイプは１つ以上のハン
　 * ドラー関数をとり得る。（例えば load イベントには複数のハンドラー関数
　 * を登録することが多い。）そこでオブジェクトのプロパティ（つまりハンド
　 * ラー関数）の逐次検出を行う。
　 */
2039: 　for ( var j in handlers ) {
　// 正規化済みの event オブジェクトのプロパティに、ここまでのコードで抽出
　// したイベントハンドラー関数とその data プロパティを代入しておく。
2040:　　 var handler = handlers[j];
2041: 　　// Pass in a reference to the handler function itself
2042: 　　// So that we can later remove it
2043: 　　args[0].handler = handler;
2044: 　　args[0].data = handler.data;
2045:

　/* 登録済みのイベントがカスタムイベントではない場合、又は抽出されたイベント
　 * ハンドラー関数の type プロパティ値が所定のカスタムイベント名称に等しい場
　 * 合には、抽出したイベントハンドラー関数 c[j] を args を引数として実行する。
　 * c[j] 関数実行後には return 値が地域変数 tmp に代入されるが、return 文
　 * がない場合には Javascript の仕様により undefined が代入される。
　 */
2046: 　　// Filter the functions by class
2047: 　　if ( !parts[1] || handler.type == parts[1] ) {
2048: 　　　var ret = handler.apply( this, args );
2049:

　/* val は 1756 行より undefined なので、型と値は false には一致しない。
　 * よって 1778 行の val !== false は true となり、val に ret 値が代入
　 * される。
　 */
2050: 　　　if ( val !== false )
2051: 　　　　val = ret;　//つまり val も ret も 一般に undefined となる。
2052:
　// ret の型と内容が false に一致すれば、つまり handler から false が return 
　// されれば、ブラウザのデフォルト動作を抑制し(1782行)、イベントの伝搬を止める
　//（cancelBuuble = true とする）。
2053: 　　　if ( ret === false ) {
2054: 　　　　event.preventDefault();
2055: 　　　　event.stopPropagation();
2056: 　　　}
2057: 　　}
2058: 　}
2059:

　// 2060 行のコメントに書いてある通り IE 対策である。
　// event オブジェクトのプロパティやメソッドに null 値を代入して
　// メモリを解放する。
2060: 　// Clean up added properties in IE to prevent memory leak
2061: 　if (jQuery.browser.msie)
2062: 　　event.target = event.preventDefault = event.stopPropagation =
2063: 　　event.handler = event.data = null;
2064:
2065: 　return val;　// undefined が返される。
2066: },

▲ToTop

$.event.fix() 解読

これまでに何度も触れてきたが、fix() メソッドは event オブジェクトをクロスブラウザ対応に正規化するためにあります。この正規化対象となっているevent オブジェクトのプロパティとメソッドは以下の通りです。

なお、クロスブラウザ対応コードの記載は省略しますが、「……（○○対応）」とは当該のコードがどのブラウザを対象として正規化を行っているかを示してます。

1. event.preventDefault()……（IE 対応）ブラウザの既定の動作を抑制する
2. event.stopPropagation()……（IE 対応）イベントのバブリングを止める。
3. event.target（IE 対応Safariのテキストノードへの対応）
4. event.target.nodeType==3（Safariのテキストノードへの対応）
5. event.relatedTarget……（IE 対応）jQuery.js 内の hover() メソッドで利用されている(1909行)。
6. event.pageX、event.pageY……（IE 対応）絶対座標値
7. event.which（key イベント及びクリックボタンイベント）……（IE 対応）
8. event.metaKey（Mac 以外への対応）

　// fix()メソッドは event オブジェクトを単一引数として定義される。
　// このオブジェクトが fix() メソッドによって正規化され、正規化された event
　// オブジェクトが fix() メソッドからreturn される。
2068: fix: function(event) {
2069: // store a copy of the original event object
2070: // and clone to set read-only properties
2071: var originalEvent = event;
　/* 上の行で元のオブジェクトの複写を作成しておき、
　 * コピーされたオブジェクトのプロパティを全て無名オブジェクト{ }に複写し、
　 * これを event オブジェクトに代入する。
　 * 以上の仕組みは jQuery.extend() メソッドの理解を要するが、このメソッド
　 * については過去に解読した【jQuery解読(7)】ので、ここでは説明を割愛する。
2072: event = jQuery.extend({}, originalEvent);
　:
　:以下略

▲ToTop