【コピペ可】すぐに使えるjQueryイベント集

jQueryのよく使うイベントをスニペットとしてまとめました。

よく使うイベント

いきなり読み込む（イベントなし）

//処理を書く

ready（jqueryの読み込み完了＆DOMContentLoaded）

$(function (event) {
    //処理を書く
});

load（画像などのアセット含めたページ読み込み完了）

$(window).on('load', function (event) {
    //処理を書く
});

resize（window）

$(window).on('resize', function (event) {
    //処理を書く
});

scroll（window）

$(window).on('scroll', function (event) {
    //処理を書く
});

click（特定の要素）

$("#target").on('click', function (event) {
    //処理を書く
});

mouseenter（特定の要素）

$("#target").on('mouseenter', function (event) {
    //処理を書く
});

mouseleave（特定の要素）

$("#target").on('mouseleave', function (event) {
    //処理を書く
});

input（input要素）

$("input").on('input', function (event) {
    //処理を書く
});

change（input要素）

$("input").on('change', function (event) {
    //処理を書く
});

focus（input要素）

$("input").on('focus', function (event) {
    //処理を書く
});

blur（input要素）

$("input").on('blur', function (event) {
    //処理を書く
});

submit（form要素）

$('form').on('submit', function (event) {
    //処理を書く
});

たまに使うイベント

keydown

$("input").on('keydown', function (event) {
    //処理を書く
});

keyup

$("input").on('keyup', function (event) {
    //処理を書く
});

beforeunload（ページを離れる時）

$(window).on('beforeunload', function (event) {
    //処理を書く
});

reset（form要素）

$('form').on('reset', function (event) {
    //処理を書く
});

めったに使わないイベント

keypress

$("input").on('keypress', function (event) {
    //処理を書く
});

mouseover（特定の要素）

$("#target").on('mouseover', function (event) {
    //処理を書く
});

mouseout（特定の要素）

$("#target").on('mouseout', function (event) {
    //処理を書く
});

focusin（input要素）

$("input").on('focusin', function (event) {
    //処理を書く
});

focusout（input要素）

$("input").on('focusout', function (event) {
    //処理を書く
});

jQueryではないイベント

何かを読み込んだタイミングをタイマーで検知する処理（jQueryを非同期で読み込むとか）

//100秒ごとに読み込まれているか確認する
var Timer = setInterval(function(event){
    if(typeof $ !== 'undefined'){
        //ここに処理を記述する
        clearInterval(Timer);
    }
}, 100);

Mutation Observer API （DOMの変更監視）

var target = document.querySelector('#target');
var observer = new MutationObserver(function (mutations) {
    //処理を記述する
    // observer.disconnect(); // 監視を終了
});
// 監視を開始
observer.observe(target, {
    attributes: true, // 属性変化の監視
    attributeOldValue: true, // 変化前の属性値を matation.oldValue に格納する
    characterData: false, // テキストノードの変化を監視
    characterDataOldValue: false, // 変化前のテキストを matation.oldValue に格納する
    childList: false, // 子ノードの変化を監視
    subtree: false // 子孫ノードも監視対象に含める
});

Intersection Observer API （交差監視・スクロール判定）

var target = document.querySelector("#target");
var observer = new IntersectionObserver(function (entry) {
    entry.forEach(function (item) {
        if (item.target === target) {
            if (item.isIntersecting) {
                //表示されたときの処理を記述
            } else {
                //非表示になったときの処理を記述
            }
            // observer.unobserve() //監視停止
        }
    });
}, {
    root: null, //ターゲットが見えるかどうかを確認するためのビューポート, nullはブラウザビューポート
    rootMargin: '0px', //rootの周りのマージンの値
    threshold: 0 //どの程度表示されたか
});
observer.observe(target);

matchMedia （スマホ・PC判定）

/** デバイスごとの処理を登録する */
var mediaQuery = window.matchMedia('screen and (max-width: 768px)');
var mobileHandler = function (event) {
    if (event.matches) {
        //SP用(768px以下)の処理を記述する
    } else {
        //PC用(769px以上)の処理を記述する
    }
}

//初期化処理
mobileHandler(mediaQuery);

//リサイズ時のイベント
mediaQuery.addEventListener('change', mobileHandler);

matchMedia （縦向き・横向き判定）

縦向きを検知（縦長）

var portraitMediaQuery = window.matchMedia('screen and (orientation: portrait)'); //縦長
var portraitHandler = function (event) {
    if (event.matches) {
        //ここに処理を記述
        console.log('portrait');
    }
};

//初期化処理
portraitHandler(portraitMediaQuery);

//変更監視イベント
portraitMediaQuery.addEventListener('change', portraitHandler);

横向きを検知（横長）

var landscapeMediaQuery = window.matchMedia('screen and (orientation: landscape)'); //横長
var landscapeHandler = function (event) {
    if (event.matches) {
        //ここに処理を記述
        console.log('landscape');
    }
};

//初期化処理
landscapeHandler(landscapeMediaQuery);

//変更監視イベント
landscapeMediaQuery.addEventListener('change', landscapeHandler);