こちらでは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()メソッドの両方を提供します。
イベントオブジェクトのプロパティとメソッドの種類
まずはイベントオブジェクトのプロパティについて解説します。
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]