01 | 2017/03 |  03

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

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

$.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:

 /* 2つの data() メソッドによって、jQuery.cache オブジェクト内に登録済みの
  * イベントハンドラー(イベントタイプと data プロパティ付きのイベントハンド
  * ラー関数)を検出し、そのイベントハンドラー関数([event.type]で特定される)
  * を地域変数 c に代入する。(※ この「検出」過程は別途詳細に述べる予定。)
  * 地域変数 args には引数オブジェクト arguments の2番目以降を抽出した結果を
  * 代入する。
  * 次に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:

 /* 或る対象ノードに登録されている1つのイベントタイプは1つ以上のハン
  * ドラー関数をとり得る。(例えば 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

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/609-940e4348

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

200801080007