イベント系メソッドの種類

jQueryの操作を「いつ」実行するかを指定するために，イベントの指定を行う．イベントは，選択した要素に特定の操作を行った際に実行される．その特定の操作によって以下のように分類される．

クリック系イベント
マウスカーソル系イベント
フォーム系イベント
画面変化系イベント
読み込み系イベント

イベント系メソッドの基本形

$('selector').eventName(function(){
	//操作
});
// または
$('selector').on('eventName',function(){
	//操作
});

selector:特定の操作を受ける要素を指定する．
eventName:特定の操作を指定する．

どちらもselectorがeventNameで指定したイベント(特定の操作)をされた時に，中に記述した操作を実行する．

クリック系イベント

click

指定した要素がクリックされたとき(マウスで押して離した時)に実行

//基本形
$('selector').click(function(){
	alert('click');
});

dbclick

指定した要素がダブルクリックされたときに実行

//基本形
$('selector').dbclick(function(){
	alert('dbclick');
});

mousedown

指定した要素が押されたとき(離さなくても)に実行

//基本形
$('selector').mousedown(function(){
	alert('mousedown');
});

mouseup

指定した要素が押された状態から離されたときに実行

//基本形
$('selector').mouseup(function(){
	alert('mouseup');
});

contextmenu

指定した要素が右クリックされたときに実行

//基本形
$('selector').contextmenu(function(){
	alert('mouseup');
});

マウスカーソル系イベント

mouseenter

マウスカーソルが要素の上にあるときに実行

//基本形
$('selector').mouseenter(function(){
	alert('mouseenter');
});

mouseleave

マウスカーソルが要素の上から離れたときに実行

//基本形
$('selector').mouseleave(function(){
	alert('mouseleave');
});

mouseover

マウスカーソルが要素の上で移動したときに実行

//基本形
$('selector').mouseover(function(){
	alert('mouseover');
});

hover

マウスカーソルが上にあるときと離れたときに実行
つまり→ mouseenter()+mouseleave()

//基本形
$('selector').hover(function(){
	alert('hover');
});

フォーム系イベント

focus

要素にフォーカスを当てたときに実行

//基本形
$('input').focus(function(){
	alert('focus');
});

blur

要素にフォーカスを当て，そのフォーカスを外したときに実行

//基本形
$('input').blur(function(){
	alert('blur');
});

change

フォーム要素が変更されたときに実行

//基本形
$('input').change(function(){
	alert('change');
});

submit

ユーザーがsubmit要素をクリックしたときに実行

//基本形
$('input').(function(){
	alert('submit');
});

keydown

キーボードのキーが押し込まれたときに実行

//基本形
$('input').keydown(function(){
	alert('keydown');
});

keyup

押し込まれたキーボードが上がったときに実行

//基本形
$('input').keyup(function(){
	alert('keyup');
});

画面変化系イベント

scroll

スクロールしたときに実行

//基本形
$(window).scroll(function () {
  alert('scroll!');
});

resize

画面サイズを変更したときに実行

//基本形
$(window).resize(function () {
  alert('resize!');
});

読み込み系イベント

ready

DOMがロードされて，操作・解析が可能になったときに実行

//基本形
$(window).ready(function () {
  alert('ready!');
});

load

DOMがロードされて，画像などのデータの読み込みが完了したときに実行

//基本形
$(window).load(function () {
  alert('load!');
});

//追記
$(window).on('load',function(){
    alert('load');
});

追記：jQuery３ではloadメソッドを使うとエラーになってしまう．追記したコードを代わりに使う．

unload

ページが閉じられたとき，またはページから移動したときに実行

//基本形
$(window).unload(function () {
  alert('unload!');
});

//追記
$(window).on('unload',function(){
    alert('unload');
});

追記：jQuery３ではunloadメソッドを使うとエラーになってしまう．追記したコードを代わりに使う．

error

エラーが発生したときに実行

//基本形
$(window).error(function () {
  alert('error!');
});

//追記
$(window).on('error',function(){
    alert('error');
});

追記：jQuery３ではerrorメソッドを使うとエラーになってしまう．追記したコードを代わりに使う．

jQuery イベント系メソッド