jQueryの.on()で使えるイベントの種類と記述例

jQueryを使う時に.on()``を使うことが当たり前になっています。``.click``や``.hoverなどの単体機能よりカスタマイズしやすい事がその理由です。
で、.on()にはイベントが沢山ありますので、そのイベントをまとめておこうと思います。

2018.8更新

• アクセスが多かったので、イベントを見やすく表形式にしました。

イベントとは？

.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のエラーが発生した時に発生

記述例1）マウスオーバー・アウトを.on()で表現する

以下のように、.on()をメソッドチェーンで複数回使うことで実現します。

$(function(){
    $('.element').on('mouseover', function(){
        //マウスオーバー時のアクションを記述
    }).on('mouseleave', function(){
        //マウスアウト時のアクションを記述
    });
});

または以下のような書き方でも大丈夫です。どちらでも同じ挙動になります。お好みでどうぞ。

$(function(){
    $('.element').on({
        'mouseover': function(){
            //マウスオーバー時のアクションを記述
        },
        'mouseleave': function(){
            //マウスアウト時のアクションを記述
        }
    });
});

記述例2）input要素のフォーカスON・OFFの時を表現する

$(function(){
    $('input.element').on('focus', function(){
        //input要素にフォーカスされた時のアクションを記述
    }).on('blur', function(){
        //input要素からフォーカスが外れた時のアクションを記述
    });
});

記述例3）入力エリアになにかしらの反応があった時

以下のように、半角スペースを開けて連続で記述することで、複数の処理の場合を指定できるのが便利です。

$(function(){
    $('input.element').on('keydown keyup keypress change', function(){
        //入力エリアになにかしらの反応があった時のアクションを記述
    });
});