初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ

このエントリーをはてなブックマークに追加
索引
1章:jQuery入門
2章:jQuery基礎
3章:jQuery発展
番外編:研究

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の説明に入ります。