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

2013.2.11

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

2018.8更新

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

イベントとは？

.on()で使う実行の種類です。以下の★の箇所に入ります。

$(function(){
    $('.element').on('★', function(){
        //ここに★に対応した処理を記述
    });
});

イベントの種類

上記コードの★部分に当たるイベントは、以下のようにたくさんあります。

記述例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(){
        //入力エリアになにかしらの反応があった時のアクションを記述
    });
});