イベント操作

イベントごとに個別の処理を割り当てて作られるプログラムのことをイベントハンドラ(イベントリスナー)と言います。jQueryではブラウザ上で行われる操作の多くがイベントとして処理されますので対話的、つまりインタラクティブな処理も容易に構築することができます。

また、「function(e)」の「e」はイベントオブジェクトと呼ばれているもので、イベントハンドラでは、引数に使われます。押されたキーの種類や座標といったイベントに関するデータを持っており、イベントハンドラ内でこれらのデータを使う場合は、この「e」を引数として渡して利用します。

イベントオブジェクトに格納されているプロパティーの例

「event.pageX」はドキュメントの左端から距離、カーソルのX座標。
「event.pageY」はドキュメントの上端から距離、カーソルのY座標。
「event.which」は押されたキーなどの情報。
「event.type」は「click」などのイベントの種類。

イベントオブジェクトに格納されているメソッドの例

「Event.preventDefault()」はキャンセルが可能な環境下でイベントをキャンセルします。
「Event.stopPropagation()」はイベントが親要素へ伝播するのを停止しますが、同一要素のイベントハンドラは中止しません。
「Event.stopImmediatePropagation()」は親要素、同一要素のイベント伝播を停止します。

イベントの種類

イベント名 発生条件
click マウスのクリック
dblclick マウスのダブルクリック
mousemove カーソルが移動した時
mousedown マウスボタンを押した時
mouseup マウスボタンを離した時
mouseover カーソルが要素上に入った時
mouseout カーソルが要素から離れた時
mouseenter カーソルが要素上に入った時
mouseleave カーソルが要素から離れた時
focus 要素にフォーカスが移った時
focusin 要素にフォーカスが移った時(バブリングサポート)
blur 要素からフォーカスが外れた時
focusout 要素からフォーカスが外れた時(バブリングサポート)
keydown キーを押した時(キーコードを返す)
keypress キーを押した時(文字コードを返す)
keyup 押されたキーを離した時
change input、textarea、selectの要素で値が変更した時
select input type="text"とtextareaで選択もしくはその範囲変更した時
submit フォームの送信時
error ブラウザ上でのエラー発生時
resize ウィンドウサイズの変更時
scroll スクロール時
load URLで読み込まれる要素が完全に読み込まれた時
unload リンクのクリックやアドレスバーへのURL入力時など(対象はwindowのみ)
ready DOMが準備できた状態のとき(対象はdocumentのみ)