【jQuery】on()によるイベント処理の種類や使い方

jQueryのonメソッドによるイベント処理

こちらではjQueryのメソッドのうち、.on()メソッドについて解説しています。

.on()の2つの構文や使い方、指定できるイベントなどについてまとめています。

jQueryのon()メソッドについて

.on()は、選択された要素に1つもしくは複数のイベントハンドラをアタッチするメソッドです。

イベントが起きると、アタッチされたイベントハンドラが実行されます。

.on(events [,selector] [,data] handler)
引数 解説
event 1つもしくは複数のイベントをスペースで区切って指定します。
selector イベントを起こす要素の子孫をフィルターするセレクター。
data イベントが起きたときに、event.dataでハンドラに渡されるデータです。
handler イベントが起きたときに実行されるイベントハンドラ(関数)です。

イベントハンドラの関数の型は

Function(Event eventObject [,Anything extraParameter] [,...])

となっています。第1引数にはイベントオブジェクトが自動で渡されます。

.on()にはもう1つ構文があり、次のようになっています。

.on(events [,selector] [,data])
引数 解説
event マップオブジェクト(キーがイベントのタイプ、値がコールバック関数)です。

eventsの例として

{ mouseenter:function(){~}, click:function(){~} }

のように記述します。

.on()の使い方

ボタンを押したときに、アラートでメッセージを表示するサンプルを紹介します。

まずHTMLでボタンを1つ用意します。

<button>テスト</button>

上記のHTMLにおいて、次のようなJavaScriptを実行します。

$('button').on('click',function(){
	alert( $(this).text() );
});

するとボタンを押したときに、アラートで「テスト」というメッセージが表示されます。

何をしているかと言うと、button要素にon()clickイベントが起きたときのイベントハンドラをアタッチしています。

マップオブジェクトを引数とする.on()の使い方

次にマップオブジェクトを引数とする.on()のサンプルを紹介します。

<p>テスト</p>

上記のHTMLにおいて次のようなJavaScriptを実行します。

$('p').on({
	mouseenter:function(){
		$(this).css('color','red');
	},
	mouseout:function(){
		$(this).css('color','black');
	}
});

「テスト」という文字列が表示され、マウスポインタが要素に入る(文字の上に重なる)と文字が赤くなり、要素から外れると文字が黒くなります。

.on()によるイベントの種類

.on()で指定できるイベントを一覧にまとめました。

アルファベット順になっています。

イベント 解説
blur 要素がフォーカスを失った時に発生。バブリングを行わない。
change 値が変更されたときや選択が変更された時に発生
click クリックされた時に発生
dblclick ダブルクリックされた時に発生
error エラーが起きた時に発生
focus 要素がフォーカスを得た時に発生。バブリングを行わない。
focusin 要素がフォーカスされたときに発生。バブリングを行う。
focusout 要素がフォーカスを失った時に発生。バブリングを行う。
keydown キーボードのキーが押し下げられた時に発生
keypress キーが押された時に発生
keyup キーボードのキーが上がった時に発生
load 画像などリソースの読み込みが完了したときに発生
mousedown マウスが押された時に発生
mouseenter マウスが要素に入った時に発生
mouseleave マウスが要素から外れた時に発生
mousemove 要素上でマウスを移動したとき時に発生
mouseout マウスが要素から外れた時に発生
mouseover マウスが要素に入った時に発生
mouseup マウスを上に離したときに発生
ready DOMの読み込みが完了したときに発生
resize ウィンドウの大きさが変更された時に発生
scroll ブラウザがスクロールした時に発生
select typeがtextのinputやtextareaでテキストを選択したときに発生
submit フォームが送信された時に発生
unload ユーザーがページを離脱するときに発生

イベントオブジェクト

.on()の引数であるイベントハンドラには、イベントオブジェクトが渡されることが保証されています。

このイベントオブジェクトはtarget、relatedTarget、which、metaKey、およびpageX/Yプロパティを正規化し、stopPropagation()とpreventDefault()メソッドの両方を提供します。

正規化とは?
ブラウザが返すイベントオブジェクトは、ブラウザによって違いがあります。jQueryではブラウザ間の違いを吸収し、どのブラウザでも同じように扱えるイベントオブジェクトを返します。このような働きを正規化と言います。

イベントオブジェクトのプロパティとメソッドの種類

まずはイベントオブジェクトのプロパティについて解説します。

event.currentTarget

イベントのバブリング中に、現在ターゲットとなっているDOM要素。

event.data

現在実行されているハンドラーがバインドされるときに、イベントメソッドに渡されるデータのオブジェクト。

event.delegateTarget

現在呼び出されているjQueryイベントハンドラーがアタッチされた要素。

event.metaKey

イベントの発生時にMETAキーが押されたかどうかを示します。

event.namespace

イベントがトリガーされたときに指定された名前空間。

event.pageX

ドキュメントの左端を基準にしたマウスの位置。

event.pageY

ドキュメントの上端を基準にしたマウスの位置。

event.relatedTarget

もしある場合、イベントに関係する他のDOM要素。

event.result

値が未定義でない限り、このイベントによってトリガーされたイベントハンドラーより返される最後の値。

event.target

イベントを開始したDOM要素。

event.timeStamp

ブラウザがイベントを作成した時間と、1970年1月1日とのミリ秒単位の差。

event.type

イベントのタイプを表します。

event.which

キーまたはマウスイベントの場合、押された特定のキーやボタンを表します。

次にイベントオブジェクトのメソッドについて解説します。

event.isDefaultPrevented()

event.preventDefault()が呼び出されたことがあるかどうかを返します。

event.isImmediatePropagationStopped()

event.stopImmediatePropagation()が呼び出されたことがあるかどうかを返します。

event.isPropagationStopped()

event.stopPropagation()が呼び出されたことがあるかどうかを返します。

event.preventDefault()

このメソッドが呼び出されると、イベントのデフォルトのアクションはトリガーされません。

例えば、リンクをクリニックしてもページの遷移をしません。

event.stopImmediatePropagation()

残りのハンドラーが実行されないようにし、イベントがDOMツリーをバブリングするのを防ぎます。

event.stopPropagation()

イベントがDOMツリーをバブリングするのを防ぎ、親ハンドラーにイベントが通知されないようにします。

[prism]