jQuery – イベント

ソース別イベント

個別イベントハンドラの一般形

要素に発生しうるイベントは下記一覧の通りで、イベントが発生した時、対応したハンドラが呼ばれる。

たとえばクリックイベントに対する処理の記述は以下の通り。

ただしこの形式のハンドラは、動的に追加された要素には対応していない。

マウスイベント

click クリック時
dblclick ダブルクリック時
mousedown マウスボタンを押した時
mouseup マウスボタンを離したとき
mouseover マウスカーソルが要素内に入った時(子要素を含む)
mouseout マウスカーソルが要素から出たとき(子要素を含む)
mouseenter マウスカーソルが要素に入った時(子要素は除く)
mouseleave マウスカーソルが要素から出た時(子要素は除く)
mousemove 要素内でマウスカーソルが移動した時
hover mouseenter / mouseleaveを一つにまとめたもの
toggle クリックの度に異なる処理を実行。v1.9以降廃止。

キーイベント

keydown キーを押した時
keypress キー入力があった時
keyup キーを離した時
focusin フォーカスされた時(子要素を含む)
focusout フォーカスが外れた時(子要素を含む)

フォームイベント

focus フォーカスされた時(子要素は除く)
blur フォーカスが外れた時(子要素は除く)
change 内容が変更された時
select 文字が選択された時
submit データ送信時

ブラウザイベント

resize リサイズした時
scroll スクロールした時
error エラーが発生した時

ロードイベント

load 読み込みが完了した時
unload ページから離れる時
ready DOMの読み込みが完了した時

イベントハンドラ・アタッチメント

イベントハンドラを要素にアタッチするメソッド。

たとえばon()メソッドの書き方の一つとして以下がある。

on()メソッドのハンドラとして、1つのイベントオブジェクトを引数に持つ関数を指定する。

探索範囲を限定してオブジェクトを探索する場合は以下の構文を用いる。

下表のbindoffまでのうち、現在はon/offメソッドのみ使えばよい。

また、on/offメソッドに指定できるイベントは、上記ソース別イベントの内、hoverとtoggle以外で指定する。

bind jQueryで最初に登場したアタッチメント。動的な要素に対応していないため、v1.3でliveが導入される。
unbind bindで設定された処理を解除。
live 動的な要素に対応したアタッチメント。処理負荷が高いため、v1.9で廃止された。
die liveで設定された処理を解除。v1.9で廃止。
delegate イベントの調査範囲を限定できるアタッチメント。v1.7で”on”に移行。
undelegate delegateで設定された処理を解除。
on イベントハンドラ・アタッチメントの最終形。
off onで設定されたイベント発生時の処理を解除。
one 1回だけ利用できるイベント発生時の処理を設定。構文はonと同じ。
triggerHandler 要素に指定したイベントを発生させるが、要素に対するブラウザ標準の機能は実行されない。
trigger 要素に指定したイベントを発生させ、ブラウザ標準の機能も実行させる。

イベントオブジェクト

概要

イベントオブジェクトはイベントハンドラに必ず渡されるobjectオブジェクト。イベント発生ごとに作成される。

基本形のコンストラクタでは、引数にイベント名を指定して作成する。たとえばclickイベントに対応するイベントオブジェクトは以下の様に作成される。

プロパティ

e.type イベントの種類
e.data イベントハンドラに渡された情報
e.pageX イベントが発生したX座標(ブラウザの座標系)
e.pageY イベントが発生したY座標(ブラウザの座標系)
e.timeStamp イベントが発生した時間(1970-01-01からのミリ秒)
e.which 正規化されたキーコード
e.result 直前に実行したイベントハンドラが返した値
e.namespace 名前空間に設定された名称
e.target イベントが発生したDOM要素
e.currentTarget 現在のDOM要素
e.delegateTarget デリゲート時の調査範囲のDOM要素
e.relatedTarget イベントの発生に関連したDOM要素

メソッド

e.stopPropagation()
バブリング(親要素方向へのイベントの伝播)を停止。
e.stopImmediatePropagation()
バブリングとイベントハンドラの実行を停止。
e.preventDefault()
ブラウザ標準の機能を停止。
e.isPropagationStopped()
stopPropagation()メソッドが実行されたかを調査。
e.isImmediatePropagationStopped()
stopImmediatePropagation()メソッドが実行されたかを調査。
e.isDefaultPrevented()
preventDefault()メソッドが実行されたかを調査。

 

jQuery – メソッド

値の取得

メソッドを通して、オブジェクトの持つプロパティなどを取得する。

※引数がない場合もある。

オブジェクトの操作

メソッドによりオブジェクトにプロパティを設定したり、動作させたりする。

※引数がない場合もある

イベント処理

構文1

オブジェクトに発生したイベントに対応して呼び出されるハンドラで、引数に処理を記述。

この構文では、後から動的に追加された要素には対応できない。

ハンドル用の関数を別に定義して引数に関数名を書いてもよいが、多くの場合無名関数が使われる。

構文2

動的に追加された要素にも対応するため、イベントが発生するたびに指定された範囲内でセレクタで指定されたオブジェクトを探索する。

この場合のon()メソッドは”イベントハンドラ・アタッチメント”の一つで、特定のイベントとそれに対するハンドラを結び付ける機能を持つ。

イベント名とセレクタは文字列で指定。

以下の例では、body要素の中の任意の要素がクリックされるとalertが立ち上がる。この場合は、H1、H2のいずれをクリックしてもalertが立ち上がる

また、on()メソッドの引数を以下のようにすると、H1をクリックしても反応せず、H2をクリックした時だけalertが立ち上がる。

イベントの種類、イベントハンドラ・アタッチメントについては、jQueryのイベントを参照。

 

jQuery – 基本

基本構文~readyイベント

概要

jQueryが、bodyブロックの各要素が読み込まれた後に実行されるよう、jQueryのreadyイベントを使う。

readyイベントは、画像などを含むページのコンテンツ全体の読み込みではなく、ページのDOM要素が読み込まれた段階で呼び出される。

このreadyイベントが呼ばれたときに、そのコールバックとしての内容としてjQuery文を書いていく。

通常、このコールバックは無名異関数として記述される()。

jQueryをすべて書き下す例

jQueryのコンストラクタでdocumentオブジェクトを作成し、そのreday()メソッドの中で無名関数のコールバックを指定し、固有のjQuery操作を行うように実装。

以下の例はCoffeeScriptで記述しており、コールバックの処理内容として、h1要素の内容を3000msかけて消すよう指示している。

jQueryに直接コールバックを渡す記法

以下の二つは同じ効果を持つ。

  • jQuery(function)
  • jQuery(document).ready(function)

jQuery()の引数にセレクタを指定すると後述のコンストラクタと解釈されてオブジェクトが作成されるが、ここでは引数に関数を指定しているため解釈が変わり、readyメソッドと同じ効果を持つ。

 

エイリアスによるシンプルな書き方

jQueryでは、”$”が”jQuery”のエイリアスとなっているので、上記のコードは以下のように簡略化できる。

特にjQueryに直接コールバックを渡す方法は一番シンプル。

 

オブジェクトとメソッド

オブジェクトの作成

jQueryの操作対象はページのDOM要素だが、jQueryでは、DOMのidやクラス名を使ってそのDOMのオブジェクトを作成し、それらのメソッドを通して操作する。

オブジェクトの作成はjQuery()コンストラクタを使い、セレクタとしてcssのセレクタを指定。

先の例では、id=”header”を与えられた要素(h1)のオブジェクトを以下の様に作成している。

メソッドによる操作

メソッドは各オブジェクトのクラスに定義されており、他のオブジェクト指向言語と同じ形で呼び出す。

この例では”#header”で作成したオブジェクトに対して、cssメソッドで前景色を青にするよう指定している。

これをエイリアスを用いて書くと以下の通り。

メソッドの機能

メソッドには、機能に応じて以下の種類がある。

  • オブジェクトの情報を取得するもの
  • オブジェクトに対して操作を行うもの
  • オブジェクトのイベント処理を行うもの