2013.2.11
jQueryを使う時に
などの単体機能よりカスタマイズしやすい事がその理由です。.on()
``を使うことが当たり前になっています。
``.click
``や
``.hover
で、
にはイベントが沢山ありますので、そのイベントをまとめておこうと思います。.on()
で使う実行の種類です。以下の★の箇所に入ります。.on()
$(function(){
$('.element').on('★', function(){
//ここに★に対応した処理を記述
});
});
上記コードの★部分に当たるイベントは、以下のようにたくさんあります。
イベント | 挙動 |
---|---|
blur | 要素がフォーカスを失った時に発生 |
focus | 要素がフォーカスを得た時に発生 |
load | ドキュメント内の全リソースの読み込みが完了したときに発生 |
resize | windowの大きさが変更された時に発生 |
scroll | ドキュメントがスクロールした時に発生 |
click | リックされた時 |
dblclick | ダブルクリックされた時 |
mousedown | 要素上でマウスが押された時に発生 |
mouseup | 要素上でマウスが押され、上がった時に発生 |
mousemove | 要素上でマウスが移動している時に発生 |
mouseover | マウスが要素に入った時に発生。子要素でも発生 |
mouseout | マウスが要素から外れた時に発生。子要素でも発生 |
mouseenter | マウスが要素に入った時に発生。子孫要素に入った時には発生しない |
mouseleave | マウスが要素から外れた時に発生。子孫要素から外れた時には発生しない |
change | 要素がフォーカスを得て値の修正が完了した時に発生 |
select | type属性値が”text”のinput要素、textarea要素のテキストが選択された時に発生 |
submit | フォームが送信された時に発生 |
keydown | キーが押し下げられた時に発生 |
keypress | キーが押された時に発生 |
keyup | キーが上がった時に発生 |
error | javascriptのエラーが発生した時に発生 |
以下のように、
をメソッドチェーンで複数回使うことで実現します。.on()
$(function(){
$('.element').on('mouseover', function(){
//マウスオーバー時のアクションを記述
}).on('mouseleave', function(){
//マウスアウト時のアクションを記述
});
});
または以下のような書き方でも大丈夫です。どちらでも同じ挙動になります。お好みでどうぞ。
$(function(){
$('.element').on({
'mouseover': function(){
//マウスオーバー時のアクションを記述
},
'mouseleave': function(){
//マウスアウト時のアクションを記述
}
});
});
$(function(){
$('input.element').on('focus', function(){
//input要素にフォーカスされた時のアクションを記述
}).on('blur', function(){
//input要素からフォーカスが外れた時のアクションを記述
});
});
以下のように、半角スペースを開けて連続で記述することで、複数の処理の場合を指定できるのが便利です。
$(function(){
$('input.element').on('keydown keyup keypress change', function(){
//入力エリアになにかしらの反応があった時のアクションを記述
});
});