jquery簡寫事件（補）

爲了使開發者更加方便的綁定事件，jQuery 封裝了經常使用的事件以便節約更多的代碼。我 們稱它爲簡寫事件!

簡寫事件綁定方法

 方法名                          觸發條件                描述

click（fn）                       鼠標               觸發每個匹配元素的click（單擊）事件

dblclick（fn）                   鼠標               觸發每個匹配元素的dblclick（雙擊）事件

mousedown（fn）            鼠標               觸發每個匹配元素的mousedown（點擊後）事件

mouseup（fn）                鼠標               觸發每個匹配元素的mouseup（點擊彈起）事件

mouseover（fn）             鼠標               觸發每個匹配元素的mouseover（鼠標移入）事件

mouseout（fn）               鼠標               觸發每個匹配元素的mouseout（鼠標移出）事件

mousemove（fn）            鼠標               觸發每個匹配元素的mousemove（鼠標移動）事件

keydown（fn）                 鍵盤               觸發每個匹配元素的keydown（鍵盤按下）事件

keyup（fn）                     鍵盤               觸發每個匹配元素的keyup（鍵盤按下彈起）事件

unload（fn）                    文檔               當卸載本頁面時綁定一個要執行的函數

resize（fn）                     文檔                觸發每個匹配元素的resize（文檔改變大小）事件

change（fn）                   表單                觸發每個匹配元素的change（值改變）事件

submit（fn）                    表單                觸發每個匹配元素的submit（表單提交）事件 

......

注意：這裏封裝的大部分方法都比較好理解，咱們不必一一演示確認，重點看幾個需 要注意區分的簡寫方法。

.mouseover()和.mouseout()表示鼠標移入和移出的時候觸發。那麼 jQuery 還封裝了另外 一組：.mouseenter()和.mouseleave()表示鼠標穿過和穿出的時候觸發。那麼這兩組本質上有 什麼區別呢？手冊上的說明是：.mouseenter()和.mouseleave()這組穿過子元素不會觸發， 而.mouseover()和.mouseout()則會觸發。

//HTML 頁面設置
<div style="width:200px;height:200px;background:green;">
<p style="width:100px;height:100px;background:red;"></p>
</div>
<strong></strong>

//mouseover 移入
$('div').mouseover(function(){ //移入 div 會觸發，移入 p 再觸發
$('strong').html(function(index,value){
returnvalue+'1';
});
});

//mouseenter 穿過
$('div').mouseenter(function(){ //穿過 div 或者 p
$('strong').html(function(index,value){ //在這個區域只觸發一次
return value+'1';
});
});

//mouseout 移出
$('div').mouseout(function(){ //移出 p 會觸發，移出 div 再觸發
$('strong').html(function(index,value){
return value+'1';
});
});

//mouseleave 穿出
$('div').mouseleave(function(){ //移出整個 div 區域觸發一次
$('strong').html(function(index,value){
return value+'1';
});
});

//.keydown()、.keyup()返回的是鍵碼，而.keypress()返回的是字符編碼。
$('input').keydown(function(e){
alert(e.keyCode); //按下 a 返回 65
});

$('input').keypress(function(e){
alert(e.charCode); //按下 a 返回 97
});

注意：e.keyCode 和 e.charCode 在兩種事件互換也會產生不一樣的效果，除了字符還有一 些非字符鍵的區別。更多詳情能夠了解 JavaScript 事件處理那章。

.focus()和.blur()分別表示光標激活和丟失，事件觸發時機是當前元素。而.focusin() 和.focusout()也表示光標激活和丟失，但事件觸發時機能夠是子元素。

//HTML 部分

<div style="width:200px;height:200px;background:red;">
<input type="text"value=""/>
</div>
<strong></strong>

//focus 光標激活
$('input').focus(function(){ //當前元素觸發
$('strong').html('123');
});

//focusin 光標激活
$('div').focusin(function(){ //綁定的是 div 元素，子類 input 觸發
$('strong').html('123');
});

注意：.blur()和.focusout()表示光標丟失，和激活相似，一個必須當前元素觸發，一個可 以是子元素觸發。