09 | 2017/10 |  11

  1. 無料サーバー

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

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

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

jQuery()の挙動を解読する(14) Event(2) Event API の解読──jQuery解読(25)

何はともあれ、まず jQuery.js がイベントを処理する Event API のコードを順に解読してみようと思います。

そのためにまず以下に、event 関連コードの全容を自分なりに整理して外観します。

Event API の概要

Event API として次の9つが jQuery 本家サイトで説明/例示されています(順番は一部変更しました)。

言うまでもなくこれらは全てjQueryインスタンスメソッドであり、 $(args) にマッチした DOM エレメントに対して各メソッドがイベントを様々に処理します。

凡例 : args は引数、fn は関数、fn の後の数字は複数のfn を区別するための便宜上のサフィックスです。

なお、インスタンスメソッド内ではいくつかの $.event クラスメソッドが呼び出されます。そしてこれらのクラスメソッドこそ jQuery.js のイベント処理の根幹を為すものです。これらのクラスメソッドについては別のエントリイで解読することとします。

jQuery.js Event API コードの概要

   API  ─  コードの概要(利用される Event 関連メソッド)
   ※ API の概略機能

概要を示すためなので説明に記述した Javascript コードは敢えて文法に従っていません。

  1. $(args).type(fn)─ fn ? this.bind(type,fn) : this.trigger(type)

    ※ type 名のイベントとイベントハンドラー関数 fn を $(args) に登録(bind)し、$(args)で指定した要素ノードで type イベントが発生した場合に fn を起動する。
    もし fn がなければ、既に登録済みのイベント「type」を起動する。

  2. $(args).bind(type,data,fn)─ this.one(type,fn) 又は $.event.add(this, type ,fn , data)

    ※ type 名のイベント、data、fnハンドラー関数を $(args) に登録し、かつ $(args) でtypeイベントが発生した場合に、fn 関数を起動する。ここに data は event オブジェクトの data プロパティに渡される optional オブジェクトで fn を通じて付加的情報をイベントに追加できる。

  3. $(args).one(type,data,fn)─ $.event.add(this, type, function(e){this.unbind(); this.fn}, data)

    ※ bind 同様に登録し、しかし1回だけの実行でそのイベントハンドラーを unbind する。

  4. $(args).unbind(type,fn)─ $.event.remove(this.type,fn)

    ※ type 名のイベントとハンドラー関数の登録を $(args) から解除する

  5. $(args).trigger(type,data,fn)─ $.event.trigger(type, data, this, true, fn)

    ※ $(args) に登録済みの type名 のイベントを optional data (配列)付きで 励起させる。またその際に fn 関数が記されていればこれも同時に起動させる。

  6. $(args).triggerHandler(type,data,fn)─ $.event.trigger(type, data, this[0], false, fn)

    ※ 1つの要素ノードに登録されたイベントハンドラー関数をブラウザの既定の動作を行わせずに起動させる。この際、 fn 関数が記されていればこれも同時に起動させる。

  7. $(args).toggle(fn1,fn2)─ return (fn1 || fn2).apply(this.[e])

    ※ 対象ノード $(args) に click イベントと2つのイベントハンドラー関数( fn1,fn2 )を登録し、対象ノードが click された時に、関数 fn1 と fn2 を交互に起動させる。

  8. $(args).hover(fn1,fn2)
      ─ return this.bind('mouseenter ,fn1).bind('mouseleave',fn2)

    ※ マウス Enter / Leave 時のハンドラー関数 fn1、fn2 を $(args) に登録し、
    併せてイベント発生時にそれらの関数を実行する。

  9. $(args).ready(fn1)─ bindReady();
      document.fn1(jQuery) ||
       $.readyList[].push(func(){return fn1.apply(this, [jQuery])});

    ※ DOMツリー読み込み完了時に fn1 関数を実行する。完了していなければ readrList 配列に fn1 関数を登録する。

ここに、これらのインスタンスメソッドは、おしなべてjQuery.fn.extend()メソッドで登録されてますので、全て jQuery.prototype プロパティに登録されます。その結果 jQuery.js の読み込みが完了した時点で、これらのメソッドの全ては「使用可能」となっています。

▲ToTop

$(args).eventtype() メソッド解読

このメソッドが jQuery.js のどこにあるのか、最初は戸惑いました。 jQuery.js のEvent 関連メソッドは add() から始まりますが、「捜索」してもなかなか「らしい」メソッドが登場しないのです。

そしてやっと見つかったと思っても、そのコードは大変複雑「怪奇」、難解です。何回(苦笑)眺めたか知れません。その何回も眺めた難解なコードは以下の通りです。

2344:jQuery.each( ("blur,focus,load,resize,scroll,unload,click,dblclick," +
2345: "mousedown,mouseup,mousemove,mouseover,mouseout,change,select," +
2346: "submit,keydown,keypress,keyup,error").split(","), function(i,name){
2347:
2348: // Handle event binding
2349: jQuery.fn[name] = function(f){
2350: return f ? this.bind(name, f) : this.trigger(name);
2351: };
2352:});

上の「個々のイベントタイプ名のメソッドを定義する」コードは次のような仕組みになっています。

  • 2344行の ("blur から 1982 行の split(",") 迄は、イベントタイプ文字列を配列に納めるコードです。
  • each() メソッドにより、この配列の個々の要素 name に対して function(i, name) が適用されます。(2348-2350行)
  • その関数内では、第一に jQuery.fn つまり jQuery.prototype プロパティに name 、つまり個々のイベントタイプ名がプロパティとして登録されます。例えば blur イベントタイプの場合には、jQuery.prototype.blur となります。(2349行)。
  • そして各イベントタイプ名のプロパティには、f をたった1つの引数とし、 f ? this.bind(name, f) : this.trigger(name) を返値とする無名関数がその値として付与されます。(2350行)
  • この無銘関数は引数 f(ユーザーによる関数)があれば、this つまり所与のインスタンスのメソッドとして bind (name,f)を 実行してその結果を返し、他方、f がなければ this のメソッドとして trigger(name) を実行してその結果を返します。
  • なお、eventtype() メソッドを prototype オブジェクトに登録することは重要な意味を持っています。jQuery.js の読み込み完了時点でそのメソッドが登録されるからです。

以上により、jQuery.js の読み込みが完了した時点で、jQuery(args).eventtype (fn) メソッドが定義されユーザーが自在に利用するだけの環境が用意されます。

イベント発生時の挙動を決めるコードは・・・

jQuery(args).eventtype (fn) メソッドは、目的の要素オブジェクトに目的のイベントタイプとそのイベントハンドラー関数を bind (登録) するだけではなく、登録された複数のイベントハンドラーを、それぞれのイベントの発生時に呼び出す機能を兼ねています。しかしそのコードはどこにあるのか、ということが次の課題となります。

この件は以後のエントリイで具体的に解明しますが、ここで簡単に結論を書いておきます。

  1. jQuery(args).eventtype (fn) メソッド実行により、jQuery(args).bind()メソッドが呼び出され、そこから更に jQuery.event.add() メソッドが呼び出されます。
  2. この add() メソッド内でお馴染みの addEventListner や attachEvent メソッドが実行され、それらのメソッドの引数として 地域変数 handle が渡されます。
  3. 既に 地域変数 handle には add()メソッド内で jQuery.event.handle.apply(arguments.callee.elem, arguments) 又は false が代入されているので、イベント発生時にはこれが呼び出されます。(1936-1848行)
  4. 呼び出されたこのメソッド内で fix() メソッドが呼び出されてクロスブラウザ対応が施され、かつ、既に登録済みでuuid番号と guid 番号によって特定可能なイベントハンドラー関数が呼び出され、実行されることにより目的が果たされます。

 

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

<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が開きます。

----------
200801010000
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。