2690

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

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

2013.2.11

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