09 | 2017/10 |  11

  1. 無料サーバー

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

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

スポンサーサイト

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

 

jQuery()の挙動を解読する(15) $(args).bind()、$(args).one()、$(args).toggle()、$(args).hover()──jQuery解読(26)

$(args).bind() 解読【※ ver1.2.2で変更なし】

bind の第1引数の type は、ver1.2.2 から複数のイベント名の記述が可能となりました。しかし、bind() メソッドそのものに変化はありません。複数の type 名対応は add() メソッドで計られています。

bind() メソッドは $(args).eventtype(fn) メソッドから呼び出されますが、このメソッド単独でも意義のある活用が可能だと思います。殊に $(args).eventtype(fn) メソッドでは与えることの出来ない data オブジェクトを引数として与えられる点は bind() メソッドの単独利用を不可欠にしています。

さて、bind() メソッドのコードは極めて短いものですが、それは実質的な処理を jQuery.event.add()メソッドに委ねているからです。この後のエントリイで解説している add()メソッドを理解することが bind() メソッドを理解するためには不可欠となります。

ここでは、コードに沿って簡単に流れを解読することに留め、詳細は add() メソッド解読に委ねます。

 // 引数の data は JSON 形式のオブジェクトとして与えることが分かりやすいようです。
 /* イベントタイプが unload だったら one() メソッドを、そうでなかったら
  * this=$(args)の個々の要素ノードに対して、jQuery.event.add()メソッドを適用
  * する。fn || data, fn && data では、興味深い論理演算子の使い方をしている。
  * 第三引数は fn ? fn : ( data ? data : null) に等しく、
  * 第四引数は fn ? data : null に等しくなる。
  * これらの論理演算子の巧妙な使い方によって data や fn が与えられない場合に
  * エラーが生じないようにしている。
  */
2184: bind: function( type, data, fn ) {
2185:  return type == "unload" ? this.one(type, data, fn) : this.each(function(){
2186:   jQuery.event.add( this, type, fn || data, fn && data );
2187:  });
2188: },
data って何をするため?

それにしても第二引数の data は何をするために存在しているのか、最初は分かりませんでした。

本家サイトに拠れば、この data は object とされています。そして「Additional data passed to the event handler as event.data」──つまり、 event.data の値としてイベントハンドラーに付加されるものと説明されています。

しかし、本家サイトには実際に data を引数に取った例は示されていません。

そこで本家サイト内を探索し実例を見つけました。それは jQuery.js ver1.1.4 Release Note の中にありました。(この Release Note 内のjquery1.1.4.jsファイル内には沢山の実例が掲載されており、大変参考になります。)

第二引数 data を使った bind() メソッドの例───出典:jquery1.1.4.js

 // ハンドラー関数の中で event.data オブジェクトのfoo プロパティを引用
 function handler(event) {
   alert(event.data.foo);
 }
 // data として {foo: "bar"} を与えてクリックイベントとhandlerを bindする
 $("p").bind("click", {foo: "bar"}, handler)
 // 以上の結果、pタグをクリックすると、"bar" が alert される。

つまり、data 引数を使えば、何らかのイベント発生時に Javascript に行わせる行為に、任意の情報を渡すことが出来る、と言うことになります。

▲ToTop

$(args).one( type, data, fn ) 【※ ver1.2.2で変更なし】解読

このメソッドはバインドしたイベントハンドラー関数 fn を1回だけ駆動させ、当該頁がreLoad されるまでは二度と励起させない関数です。ボタンをクリックした際に Javascript に何かを行わせ、しかし二度目以降ののクリック時には何もさせない──そんな場合に重宝します。

 // 引数は bind() と同様です。
2190:one: function( type, data, fn ) {
 // this=&(args) の各々の要素ノードに対して、関数を実行させ this を返す。
2191: return this.each(function(){
 /* function(event) 関数を add() メソッドに渡す。
  * この add() メソッドによって地域変数 handler に function(event){・・・}関数が
  * 代入され、これが type イベント発生時のハンドラーとして bind(登録)される。
  * さて、この handler 関数は type イベントが発生して実行される際に2つのこ
  * とを行う。まず 2193 行により当該要素ノードから当該イベントの登録を抹消する。
  * 次に 2194 行により fn または data 関数を実行する。
  * ここに arguments は 2193 行より event となる。
  */
2192:   jQuery.event.add( this, type, function(event) {
2193:    jQuery(this).unbind(event);
2194:    return (fn || data).apply( this, arguments);
2195:   }, fn && data);
2196: });
2197:},

なお、ここでも論理演算子を巧みに使って、data や fn がユーザーから与えられない場合のエラーを回避しています。

▲ToTop

$(args).toggle(fn1,fn2) 【※ ver1.2.2で変更なし】解読

これは同一の要素ノードに対して、クリック時に交互に起動する2つのイベントハンドラー関数を登録するメソッドです。

2217:toggle: function() {
2218: // Save reference to arguments for access in closure
    // クロージャーからアクセスするために地域変数に引数(2つのイベント
    // ハンドラー関数)を代入
2219:  var a = arguments;
2220:
     // クリックイベント発生時の挙動を履行させる。
2221:  return this.click(function(e) {
 // this.lastToggle プロパティに、それが 0 ならば 1 を、さもなくば
 //(つまり 1 または未定義ならば)0 を代入する。
2222:   // Figure out which function to execute
2223:   this.lastToggle = 0 == this.lastToggle ? 1 : 0;
2224:
 /* clickイベントによるブラウザ固有の挙動を抑制する。
  * なお、click()メソッド実行過程において、$.event.add()、$.event.handle()、
  * $.event.fix() が実行済みなので、既にクロスブラウザ対応となっている。
  * このため e.preventDefault() はクロスブラウザ対応のメソッドとなっている。
  * この当たりのことは handle()メソッドの解読で詳述する。
  */
2225:   // Make sure that clicks stop
2226:   e.preventDefault();
2227:
 /* 1900行 の return とapply(this,・・・ により 1900 行の apply() メソッドが
  * クロージャーとなる。つまり、次行により this.fn1(e) 又は this.fn2(e) が
  * returnされ 更に1892行によってclick()メソッドが呼出し元である toggle() 
  * メソッドに return されるが、地域変数 a に代入された fn1,fn2 の値は
  * toggle()メソッド読み込み完了後も、次行のメソッドから参照出来る。
  */
2228:   // and execute the function
2229:   return a[this.lastToggle].apply( this, [e] ) || false;
2230:  });
2231: },

$(args).hover() 【※ ver1.2.2で変更あり】解読

このメソッドは $(args) 各ノードに対して2つのイベント( mouseenter/mouseleave )を一度に bind するものです。ver 1.2.1では同一名称のメソッドで mouseover/mouseout イベントを登録していましたが、1.2.2 では mouseenter/mouseleave に対応する内容に変更されました。

そもそも mouseenter/mouseleave は IE 固有のイベントであり、他のブラウザはサポートしていないはずです。ですからこれらのイベントに対応したということは、mouseover と mouseout だけでは IE で何らかの不都合が生じたため、敢えて mouseenter/mouseleave にも対応したのだと推測します。

コードを分析してみると、IEの場合には mouseenter/mouseleave 名のままでイベントを bind させており、他方でその他のブラウザでは、hover()メソッドは mouseover/mouseout 名のイベントを bind するようプログラムされています。つまり、hover() メソッドは IE の場合には mouseenter/mouseleave イベントを、その他の場合には mouseover/mouseout を扱うことになります。

さて、hover()メソッドは僅か3行でお仕舞いです。そして内容は極めて単純であり解読するまでもないでしょう。

具体的な hover メソッドの挙動解読は jQuery()の挙動を解読する(23) $.event.special オブジェクト ──jQuery解読(35) にて行います。

2233 hover: function(fnOver, fnOut) {
2234  return this.bind('mouseenter', fnOver).bind('mouseleave', fnOut);
2235 },

 

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

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

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