ソース別イベント

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

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

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

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

マウスイベント

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つのイベントオブジェクトを引数に持つ関数を指定する。

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

下表のbind～offまでのうち、現在は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()メソッドが実行されたかを調査。