- 索引
- 1章:jQuery入門
-
- ├ jQueryのメリット
- ├ readyイベント
- ├ オブジェクトについて
- ├ メソッドについて
- ├ 情報の取得
- ├ イベント(1)
- ├ イベント(2)
- └ 初歩なサンプル
- 2章:jQuery基礎
-
- ├ thisについて(1)
- ├ thisについて(2)
- ├ jQueryとDOM要素
- ├ 簡単な演出
- ├ thisから辿る
- ├ 汎用的なアニメ(1)
- ├ 汎用的なアニメ(2)
- ├ アニメの停止
- ├ アニメを管理する仕組み
- └ 汎用的なアニメ(3)
- 3章:jQuery発展
-
- ├ イベントフロー(1)
- ├ イベントフロー(2)
- ├ イベントフロー(3)
- ├ 画像のプリロード
- ├ jQueryの高速化
- └ メソッドチェーン
- 番外編:研究
-
- ├ イベントを外す
- ├ cssアニメとの連携(1)
- ├ cssアニメとの連携(2)
- ├ cssアニメとの連携(3)
- ├ セレクタの自作(1)
- ├ セレクタの自作(2)
- ├ クロージャ(1)
- ├ クロージャ(2)
- └ クロージャ(3)
ver1.6までのイベント達
イベント開発の大まかな流れ
これから紹介するver1.6までの古いイベントは、ver1.7ではonに集約されています。ですのでサンプルなどでは利用しないのですが、onを理解するためにも知っておいた方がよいと思うので説明していきます。
bind / unbind (ver1.0〜)
click等の初心者向けのイベントは、一度設定したら外すことはできません。簡単なコンテンツの場合は必要ないのですが、すこし複雑なコンテンツを作成するときに、イベントを外したい場合があります(ボタンを一時的にクリックできないようにしたい等)。そのような処理に対応するために作成されたのがbindとunbindです。bindによってイベントを設定し、unbindによってイベントを外すことができるのです。同じ事はver1.7のonとoffで可能なため現在では利用されません。
live / die (ver1.3〜)
jQueryはhtml内の要素を自由に追加/変更することが可能です。しかしclickやhover等の初心者向けのイベントや、前述のbind/unbindはjQueryによって追加/変更された要素に対し利用できませんでした。不思議な仕様に思うかもしれませんが、これはjQueryでは最初に1回だけしかhtml内の要素を調査しないためです。ですので、jQueryで追加変更された要素は認識できず、操作できないのです。
それでは高度なコンテンツを作成できないので、ver1.3でlive / dieが追加されることになります。これでjQueryによって追加変更された要素にもイベントが付けられるようになりました。仕組みとしてはイベントが発生する度にhtml内の要素を調査するようにしています(bind等は最初に1回調べるだけ)。dieはliveで付けたイベントを外すことができます。同じ事はver1.7のonとoffで可能なので、これも現在では利用されません。
delegate / undelegate (ver1.4.2〜)
liveはイベントが発生するたびにhtml内の要素を調べます。ページ内の要素が少ない場合は良いのですが、多い場合は調べるのに時間が掛かり速度が落ちることになります(よほど要素数の多いコンテンツでないと人間が気付くような差はでないと思いますが)。
そこで作成されたのがdelegateとundelegateです。これはhtml内の要素を全て調べるのではなくセレクタで範囲を指定し、その中に含まれる要素だけを調べ、イベントをを設定します。範囲が指定されている分、高速化されます(本家のliveのページを確認すると1.4以降ならdelegateを、1.7以降ならonを利用するように勧めています)。これもver1.7のonとoffで可能です。
onにまとめられた理由
後から追加されたものは、以前のものの機能を全て持っています。つまりdelegateはliveやbindと同じ事ができ、liveはbindと同じ事ができるのです。これだけであれば色々なものが混在していても問題ないのですが、delegateやlive,bindは微妙に構文が異なります(必要に応じて進化してきたから当然なのですが..)。
それでは混乱してしまうので、ver1.7ではbind〜delegateまでをまとめたonを作成し、それを利用するように推奨しています。ということで2章ではonを理解することを目標とします。ただし説明の都合で、昔のliveやdelegateなども一部登場します。
これで過去のイベントについては終了です。次回からonの説明に入ります。
次のページ:イベントハンドラのon