jQuery イベント系メソッド

# イベント系メソッドの種類 
jQueryの操作を「いつ」実行するかを指定するために，イベントの指定を行う．イベントは，選択した要素に特定の操作を行った際に実行される．その特定の操作によって以下のように分類される．
* クリック系イベント
* マウスカーソル系イベント
* フォーム系イベント
* 画面変化系イベント
* 読み込み系イベント

# イベント系メソッドの基本形
```javascript
$('selector').eventName(function(){
	//操作
});
// または
$('selector').on('eventName',function(){
	//操作
});
```
- <font color="DarkTurquoise">`selector`</font>:特定の操作を受ける要素を指定する．
- <font color="LimeGreen">`eventName`</font>:特定の操作を指定する．

どちらも<font color="DarkTurquoise">`selector`</font>が<font color="LimeGreen">`eventName`</font>で指定したイベント(特定の操作)をされた時に，中に記述した操作を実行する．

# クリック系イベント

## click
指定した要素がクリックされたとき(マウスで押して離した時)に実行
```javascript
//基本形
$('selector').click(function(){
	alert('click');
});
```
    
## dbclick
指定した要素がダブルクリックされたときに実行
```javascript
//基本形
$('selector').dbclick(function(){
	alert('dbclick');
});
```

## mousedown
指定した要素が押されたとき(離さなくても)に実行
```javascript
//基本形
$('selector').mousedown(function(){
	alert('mousedown');
});
```
   
## mouseup
指定した要素が押された状態から離されたときに実行
```javascript
//基本形
$('selector').mouseup(function(){
	alert('mouseup');
});
```
    
## contextmenu
指定した要素が右クリックされたときに実行
```javascript
//基本形
$('selector').contextmenu(function(){
	alert('mouseup');
});
```

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

## mouseenter
マウスカーソルが要素の上にあるときに実行
```javascript
//基本形
$('selector').mouseenter(function(){
	alert('mouseenter');
});
```

## mouseleave
マウスカーソルが要素の上から離れたときに実行
```javascript
//基本形
$('selector').mouseleave(function(){
	alert('mouseleave');
});
```
    
## mouseover
マウスカーソルが要素の上で移動したときに実行
```javascript
//基本形
$('selector').mouseover(function(){
	alert('mouseover');
});
``` 
   
## hover
マウスカーソルが上にあるときと離れたときに実行
つまり→ `mouseenter()`+`mouseleave()`
```javascript
//基本形
$('selector').hover(function(){
	alert('hover');
});
```    

# フォーム系イベント

## focus
要素にフォーカスを当てたときに実行
```javascript
//基本形
$('input').focus(function(){
	alert('focus');
});
```
    
## blur
要素にフォーカスを当て，そのフォーカスを外したときに実行
```javascript
//基本形
$('input').blur(function(){
	alert('blur');
});
```
## change
フォーム要素が変更されたときに実行
```javascript
//基本形
$('input').change(function(){
	alert('change');
});
```
 
## submit
ユーザーがsubmit要素をクリックしたときに実行
```javascript
//基本形
$('input').(function(){
	alert('submit');
});
```  
## keydown
キーボードのキーが押し込まれたときに実行
```javascript
//基本形
$('input').keydown(function(){
	alert('keydown');
});
```

## keyup
押し込まれたキーボードが上がったときに実行
```javascript
//基本形
$('input').keyup(function(){
	alert('keyup');
});
```

# 画面変化系イベント

## scroll
スクロールしたときに実行
```javascript
//基本形
$(window).scroll(function () {
  alert('scroll!');
});
```

## resize
画面サイズを変更したときに実行
```javascript
//基本形
$(window).resize(function () {
  alert('resize!');
});
``` 

# 読み込み系イベント

## ready
DOMがロードされて，操作・解析が可能になったときに実行
```javascript
//基本形
$(window).ready(function () {
  alert('ready!');
});
```

## load
DOMがロードされて，画像などのデータの読み込みが完了したときに実行
```javascript
//基本形
$(window).load(function () {
  alert('load!');
});

//追記
$(window).on('load',function(){
    alert('load');
});
```
追記：jQuery３ではloadメソッドを使うとエラーになってしまう．追記したコードを代わりに使う．

## unload
ページが閉じられたとき，またはページから移動したときに実行
```javascript
//基本形
$(window).unload(function () {
  alert('unload!');
});

//追記
$(window).on('unload',function(){
    alert('unload');
});
```
追記：jQuery３ではunloadメソッドを使うとエラーになってしまう．追記したコードを代わりに使う．

## error
エラーが発生したときに実行
```javascript
//基本形
$(window).error(function () {
  alert('error!');
});

//追記
$(window).on('error',function(){
    alert('error');
});
```
追記：jQuery３ではerrorメソッドを使うとエラーになってしまう．追記したコードを代わりに使う．