JQuery學(xué)習(xí)筆記整理：事件處理

      本章的主題是jQuery事件處理，如果你對(duì)事件處理不了解，可以看這篇文章《JavaScript學(xué)習(xí)筆記整理（10）：Event事件》。

bind(eventType,function)、bind(eventType,data,function)  為jQuery對(duì)象內(nèi)每一個(gè)匹配元素添加一個(gè)事件處理函數(shù)，支持可選的data參數(shù)。
bind(eventType,boolean)
bind(map)
one(eventType,funciton)、one(eventType,data,function)
unbind()、unbind(eventType)、unbind(eventType,boolean)
unbind(Event)

$('.box').bind('click',function(event){})

$('.box').bind('click mousedown',funciton(){});

var handle = {
  mousedown: function(){},
  mouseup: function(){}
};
$('.box').bind(handle);

var obj = {name:'tg'};
$('.box').bind('click',obj,funciton(event){
  console.log(event.data.name);  // "tg"
});

$('.box').unbind('mousedown');

$('.box').bind('click',function(event){
  $(this).unbind(event);
})

$('.box').one('click',function(){   
  alert(1);   
});

on(events,selector,data,function)、on(map,selector,data)  為匹配元素綁定事件處理函數(shù)
off(events,selector,function)、off(map,selector)  撤銷使用on方法綁定的事件處理函數(shù)
delegate(selector,eventType,function)、delegate(selector,eventType,data,function)、delegate(selector,map)  使用selector過濾jQuery對(duì)象內(nèi)所有匹配元素，然后綁定事件處理函數(shù)
undelegate()、undelegate(selector,eventType)  撤銷使用delegate方法綁定且匹配選擇器與事件類型的事件處理函數(shù)

$('.box').on('click',function(event){});
$('.box').on('click mousedown',function(){});
$('.box').on('click',{color:'red'},function(event){});
$('.box').on('click','p',function(){});  // 為div.box中的所有p元素綁定click事件處理函數(shù)

<div class="box">
 <p>123</p><p>34</p>
</div>

$('.box').on('click','p',function(){ alert(1); });

$('.box').append('<p>新添加</p>');

trigger(eventType)  觸發(fā)綁定在jQuery對(duì)象內(nèi)匹配元素的特定事件類型（由eventType決定）上的事件處理函數(shù)。
trigger(Event)   觸發(fā)綁定在jQuery對(duì)象內(nèi)匹配元素的特定事件（由Event事件決定）上的事件處理函數(shù)。
triggerHandler(eventType)  觸發(fā)綁定在jQuery對(duì)象內(nèi)第一個(gè)匹配元素上的事件處理函數(shù)，既不冒泡，也不實(shí)施事件的默認(rèn)行為。

<div class="box">123</div>
<button>模擬點(diǎn)擊</button>

$('.box').on('click',function(){
  alert(1);
});
$('button').on('click',function(){
  $('.box').trigger('click');
});

2、事件方法

jQuery提供了很多常用事件綁定事件處理函數(shù)。

2.1 document對(duì)象事件方法

load(function)  即load事件，在頁(yè)面中的子元素及資源文件載入完成時(shí)觸發(fā)
ready(function)  在頁(yè)面中的元素已經(jīng)處理完成，DOM就緒時(shí)觸發(fā)
unload(function)  即unload事件，當(dāng)用戶離開當(dāng)前頁(yè)面時(shí)觸發(fā)

2.2 瀏覽器事件方法

error(function)  即error事件，在載入外部資源文件出錯(cuò)時(shí)觸發(fā)（如載入圖片出錯(cuò)）
resize(function) 即resize事件，當(dāng)瀏覽器窗口大小發(fā)生變化時(shí)觸發(fā)
scroll(function) 即scroll事件，當(dāng)用戶拖動(dòng)滾動(dòng)條時(shí)觸發(fā)

2.3 鼠標(biāo)事件方法

click(function)  即click事件，在用戶點(diǎn)擊鼠標(biāo)按鈕時(shí)觸發(fā)
dblclick(function)  即dblclick事件，在用戶雙擊鼠標(biāo)按鈕時(shí)觸發(fā)
focusin(function)  即focusin事件，在元素得到焦點(diǎn)時(shí)觸發(fā)
focusout(function) 即focusout事件，在元素失去焦點(diǎn)時(shí)觸發(fā)
hover(function)、hover(function,function)  即hover事件，在鼠標(biāo)進(jìn)入或離開元素時(shí)觸發(fā)，若指定兩個(gè)參數(shù)，進(jìn)入時(shí)會(huì)觸發(fā)第一個(gè)函數(shù)，離開時(shí)會(huì)觸發(fā)第二個(gè)函數(shù)，否則都會(huì)觸發(fā)第一個(gè)。
mousedown(function)  即mousedown事件，當(dāng)在某元素上按下鼠標(biāo)時(shí)觸發(fā)
mouseenter(function) 即mouseenter事件，當(dāng)鼠標(biāo)進(jìn)入某元素顯示區(qū)域時(shí)觸發(fā)
mouseleave(function) 即mouseleave事件，當(dāng)鼠標(biāo)離開某元素顯示區(qū)域時(shí)觸發(fā)
mousemove(function)  即mousemove事件，當(dāng)鼠標(biāo)在某元素顯示區(qū)域內(nèi)移動(dòng)時(shí)觸發(fā)
mouseout(function)   即mouseout事件，當(dāng)鼠標(biāo)離開某元素顯示區(qū)域時(shí)觸發(fā)
mouseover(function)  即mouseover事件，當(dāng)鼠標(biāo)進(jìn)入某元素顯示區(qū)域時(shí)觸發(fā)
mouseup(function)    即mouseup事件，當(dāng)按下后釋放鼠標(biāo)按鈕時(shí)觸發(fā)

mouseenter()與mouseover()、mouseleave() 與mouseup()的區(qū)別？

mouseenter()和mouseover()作用一樣，但前者不支持冒泡，后者支持。

mouseleave()和mouseup()作用一樣，但前者不支持冒泡，后者支持。

2.4 表單事件方法

blur(function)  即blur事件，在元素失去焦點(diǎn)時(shí)觸發(fā)
change(function)  即change事件，在元素的值發(fā)生變化時(shí)觸發(fā)
focus(function)  即focus事件，在元素獲得焦點(diǎn)時(shí)觸發(fā)
select(function)  即select事件，在用戶選中某個(gè)可選框時(shí)觸發(fā)
submit(function)  即submit事件，當(dāng)用戶提交表單時(shí)觸發(fā)

2.5 鍵盤事件方法

keydown(function)  即keydown事件，當(dāng)用戶按下一個(gè)鍵后觸發(fā)
keypress(function)  即keypress事件，當(dāng)用戶按下一個(gè)鍵并釋放后觸發(fā)
keyup(function)  即keyup事件，當(dāng)用戶釋放一個(gè)鍵時(shí)觸發(fā)

keypress事件會(huì)在按下鍵盤按鍵時(shí)觸發(fā)。它與keydown事件類似，但keypress著重的是按下該鍵輸入了哪個(gè)字符(只有能夠打印字符的鍵才會(huì)觸發(fā)keypress)，keydown著重的是按下了哪個(gè)鍵(按下任何鍵都可觸發(fā)keydown)。對(duì)于諸如Ctrl、Alt、Shift、Delete、Esc等修飾性和非打印鍵，請(qǐng)監(jiān)聽keydown事件。

3、jQuery Event對(duì)象的屬性和方法

Event對(duì)象主要英語(yǔ)獲取事件的相關(guān)信息。

currentTarget   返回正在處理（響應(yīng)）該事件的元素
data   返回綁定事件時(shí)傳遞的data對(duì)象
isDefaultPrevented()   若已經(jīng)調(diào)用過preventDefault()方法，返回true
isImmediatePropagationStopped()  若已經(jīng)調(diào)用過stopImmediatePropation()方法，返回true
originalEvent   返回未經(jīng)jQuery處理的原始DOM Event對(duì)象
pageX、pageY   返回相對(duì)于頁(yè)面左上角的鼠標(biāo)位置
preventDefault()  用來(lái)阻止當(dāng)前事件的默認(rèn)行為
relatedTarget  僅對(duì)鼠標(biāo)事件有效，返回該鼠標(biāo)事件有關(guān)的元素
result   返回處理該事件的最后一個(gè)事件處理函數(shù)的返回值
stopImmediatePropagation()  立即阻止調(diào)用當(dāng)前事件的其他事件處理函數(shù)
stopPropagation()  阻止事件冒泡
target  返回觸發(fā)事件的元素
timeStamp  返回事件發(fā)生的時(shí)間
type  返回事件類型
which  在鍵盤和鼠標(biāo)事件中，返回用戶按下的鍵或鼠標(biāo)按鈕

了解原生的JavaScript事件對(duì)理解jQuery事件很有幫助，可以看這篇文章《JavaScript學(xué)習(xí)筆記整理（10）：Event事件》。