用交互操作中，最簡單直接的操作就是點(diǎn)擊操作。jQuery提供了兩個(gè)方法一個(gè)是click方法用于監(jiān)聽用戶單擊操作，另一個(gè)方法是dbclick方法用于監(jiān)聽用戶雙擊操作。這兩個(gè)方法的用法是類似的，下面以click()事件為例

方法一：$ele.click()

綁定$ele元素，不帶任何參數(shù)一般是用來指定觸發(fā)一個(gè)事件，用的比較少

點(diǎn)擊觸發(fā)

$("ele").click(function(){
    alert("觸發(fā)指定事件")
})
$("#test").click(function(){
     $("ele").click()  //手動(dòng)指定觸發(fā)事件 
});

方法二：$ele.click( handler(eventObject) )

綁定$ele元素，每次$ele元素觸發(fā)點(diǎn)擊操作會(huì)執(zhí)行回調(diào) handler函數(shù)，這樣可以針對(duì)事件的反饋?zhàn)龊芏嗖僮髁?，方法中的this是指向了綁定事件的元素

點(diǎn)擊觸發(fā)

$("#test").click(function() {
    // this指向div元素
});

方法三：$ele.click( [eventData ], handler(eventObject) )

使用與方法二一致，不過可以接受一個(gè)數(shù)據(jù)參數(shù)，這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題

點(diǎn)擊觸發(fā)

$("#test").click(11111,function(e) {
    //this指向div元素
    //e.data  => 11111 傳遞數(shù)據(jù)
});

dblclick()的用法和click()的用法是類似的，可以參考以上click()的用法。

click事件觸發(fā)需要以下幾點(diǎn)：

click事件其實(shí)是由mousedown與mouseup 2個(gè)動(dòng)作構(gòu)成，所以點(diǎn)擊的動(dòng)作只有在松手后才觸發(fā)

dblclick事件觸發(fā)需要以下幾點(diǎn)：

dblclick又是由2個(gè)click疊加而來的，所以dblclick事件只有在滿足以下條件的情況下才能被觸發(fā)

鼠標(biāo)指針在元素里面時(shí)點(diǎn)擊

鼠標(biāo)指針在元素里面時(shí)釋放

鼠標(biāo)指針在元素里面時(shí)再次點(diǎn)擊，點(diǎn)擊間隔時(shí)間，是系統(tǒng)而定

鼠標(biāo)指針在元素里面時(shí)再次釋放

注意
在同一元素上同時(shí)綁定 click 和 dblclick 事件是不可取的。各個(gè)瀏覽器事件觸發(fā)的順序是不同的，一些瀏覽器在dblclick之前接受兩個(gè) click 事件 ，而一些瀏覽器只接受一個(gè) click 事件。用戶往往可通過不同的操作系統(tǒng)和瀏覽器配置雙擊靈敏度

jQuery提供了一個(gè)mousedown的快捷方法可以監(jiān)聽用戶鼠標(biāo)按下的操作，與其對(duì)應(yīng)的還有一個(gè)方法mouseup快捷方法可以監(jiān)聽用戶鼠標(biāo)彈起的操作。兩種方法用法類似，下面以mousedown()為例

方法一：$ele.mousedown()

綁定$ele元素，不帶任何參數(shù)一般是用來指定觸發(fā)一個(gè)事件，一般用的比較少

點(diǎn)擊觸發(fā)

$("ele").mousedown(function(){
    alert("觸發(fā)指定事件")
})
$("#test").mousedown(function(){
     $("ele").mousedown()  //手動(dòng)指定觸發(fā)事件 
});

方法二：$ele.mousedown( handler(eventObject) )

綁定$ele元素，每次$ele元素觸發(fā)點(diǎn)擊操作會(huì)執(zhí)行回調(diào) handler函數(shù)，可以針對(duì)事件的反饋?zhàn)龊芏嗖僮?/p>

點(diǎn)擊觸發(fā)

$("#test").mousedown(function() {
    //this指向 div元素
});

方法三：$ele.mousedown( [eventData ], handler(eventObject) )

使用與方法二一致，不過可以接受一個(gè)數(shù)據(jù)參數(shù)，這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題

點(diǎn)擊觸發(fā)

$("#test").mousedown(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 傳遞數(shù)據(jù)
});

mousedown事件觸發(fā)需要需要：

mousedown強(qiáng)調(diào)是按下觸發(fā)

如果在一個(gè)元素按住了鼠標(biāo)不放，并且拖動(dòng)鼠標(biāo)離開這個(gè)元素，并釋放鼠標(biāo)鍵，這仍然是算作mousedown事件

任何鼠標(biāo)按鈕被按下時(shí)都能觸發(fā)mousedown事件

用event 對(duì)象的which區(qū)別按鍵，敲擊鼠標(biāo)左鍵which的值是1，敲擊鼠標(biāo)中鍵which的值是2，敲擊鼠標(biāo)右鍵which的值是3

mouseup事件觸發(fā)需要：

mouseup強(qiáng)調(diào)是松手觸發(fā)，與mousedown是相反的

mouseup與mousedown組合起來就是click事件

如果用戶在一個(gè)元素上按下鼠標(biāo)按鍵，并且拖動(dòng)鼠標(biāo)離開這個(gè)元素，然后釋放鼠標(biāo)鍵，這仍然是算作mouseup事件

任何鼠標(biāo)按鈕松手時(shí)都能觸發(fā)mouseup事件

用event 對(duì)象的which區(qū)別按鍵，敲擊鼠標(biāo)左鍵which的值是1，敲擊鼠標(biāo)中鍵which的值是2，敲擊鼠標(biāo)右鍵which的值是3

click事件其實(shí)是由mousedown于mouseup 2個(gè)動(dòng)作構(gòu)成，所以點(diǎn)擊的動(dòng)作只有在松手后才觸發(fā)

用交互操作中，經(jīng)常需要知道用戶是否有移動(dòng)的操作?；谝苿?dòng)的機(jī)制可以做出拖動(dòng)、拖拽一系列的效果出來。針對(duì)移動(dòng)事件，jQuery提供了一個(gè)mousemove的快捷方法可以監(jiān)聽用戶移動(dòng)的的操作

方法一：$ele.mousemove()

綁定$ele元素，不帶任何參數(shù)一般是用來指定觸發(fā)一個(gè)事件，用的比較少

點(diǎn)擊觸發(fā)

$("ele").mousemove(function(){
    alert("觸發(fā)指定事件")
})
$("#test").click(function(){
     $("ele").mousemove()  //指定觸發(fā)事件 
}); 

方法二：$ele.mousemove( handler(eventObject) )

綁定$ele元素，每次$ele元素觸發(fā)點(diǎn)擊操作會(huì)執(zhí)行回調(diào) handler函數(shù)，這樣可以針對(duì)事件的反饋?zhàn)龊芏嗖僮?/p>

滑動(dòng)觸發(fā)

$("#test").mousemove(function() {
    // this指向 div元素 
});

方法三：$ele.mousemove( [eventData ], handler(eventObject) )

使用與方法二一致，不過可以接受一個(gè)數(shù)據(jù)參數(shù)，這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題

點(diǎn)擊觸發(fā)

$("#test").mousemove(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 傳遞數(shù)據(jù)
});

mousemove事件觸發(fā)需要：

mousemove事件是當(dāng)鼠標(biāo)指針移動(dòng)時(shí)觸發(fā)的，即使是一個(gè)像素

如果處理器做任何重大的處理，或者如果該事件存在多個(gè)處理函數(shù)，這可能造成瀏覽器的嚴(yán)重的性能問題

jQuery提供了mouseover()與mouseout()事件來監(jiān)聽用戶的移入移出操作，兩者用法類似，下面一mouseover為例

方法一：$ele.mouseover()

綁定$ele元素，不帶任何參數(shù)一般是用來指定觸發(fā)一個(gè)事件，用的比較少

點(diǎn)擊觸發(fā)

$("ele").mouseover(function(){
    alert("觸發(fā)指定事件")
})
$("#test").click(function(){
     $("ele").mouseover()  //指定觸發(fā)事件 
});

方法二：$ele.mouseover( handler(eventObject) )

綁定$ele元素，每次$ele元素觸發(fā)點(diǎn)擊操作會(huì)執(zhí)行回調(diào) handler函數(shù)，這樣可以針對(duì)事件的反饋?zhàn)龊芏嗖僮?/p>

滑動(dòng)觸發(fā)

$("#test").mouseover(function() {
    //this指向 div元素 
});

方法三：$ele.mouseover( [eventData ], handler(eventObject) )

使用與方法二一致，不過可以接受一個(gè)數(shù)據(jù)參數(shù)，這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題

點(diǎn)擊觸發(fā)

$("#test").mouseover(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 傳遞數(shù)據(jù)
});

用交互操作中，經(jīng)常需要知道用戶操作鼠標(biāo)是否有移到元素內(nèi)部或是元素外部，因此jQuery提供了一個(gè)mouseenter和mouseleave的快捷方法可以監(jiān)聽用戶移動(dòng)到內(nèi)部的操作

使用上非常簡單，三種參數(shù)傳遞方式與mouseover和mouseout是一模一樣的，所以這里不再重復(fù)，主要講講區(qū)別，下面以mouseenter為例：

mouseenter JavaScript事件是Internet Explorer專有的。由于該事件在平時(shí)很有用，jQuery的模擬這一事件，以便它可用于所有瀏覽器。該事件在鼠標(biāo)移入到元素上時(shí)被觸發(fā)。任何HTML元素都可以接受此事件

關(guān)鍵點(diǎn)就是：冒泡的方式處理問題

mouseover為例：

    
鼠標(biāo)離開此區(qū)域觸發(fā)mouseleave事件

如果在p元素與div元素都綁定mouseover事件，鼠標(biāo)在離開p元素，但是沒有離開div元素的時(shí)候，觸發(fā)的結(jié)果:

p元素響應(yīng)事件

div元素響應(yīng)事件

這里的問題是div為什么會(huì)被觸發(fā)？ 原因就是事件冒泡的問題，p元素觸發(fā)了mouseover，他會(huì)一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就會(huì)被觸發(fā)

所以在這種情況下面，jQuery推薦我們使用 mouseenter事件

mouseenter事件只會(huì)在綁定它的元素上被調(diào)用，而不會(huì)在后代節(jié)點(diǎn)上被觸發(fā)

在元素上移進(jìn)移出切換其換色，一般通過2個(gè)事件配合就可以達(dá)到，這里用mouseenter與mouseleave，這樣可以避免冒泡問題

$(ele).mouseenter(function(){
     $(this).css("background", "#bbffaa");
 })
$(ele).mouseleave(function(){
    $(this).css("background", "red");
})

hover方法中只需傳遞2個(gè)回調(diào)函數(shù)即可，不需要顯示的綁定2個(gè)事件

$(selector).hover(handlerIn, handlerOut)

handlerIn(eventObject)：當(dāng)鼠標(biāo)指針進(jìn)入元素時(shí)觸發(fā)執(zhí)行的事件函數(shù)

handlerOut(eventObject)：當(dāng)鼠標(biāo)指針離開元素時(shí)觸發(fā)執(zhí)行的事件函數(shù)

當(dāng)一個(gè)元素，或者其內(nèi)部任何一個(gè)元素獲得焦點(diǎn)的時(shí)候，例如：input元素，用戶在點(diǎn)擊聚焦的時(shí)候，如果開發(fā)者需要捕獲這個(gè)動(dòng)作的時(shí)候，jQuery提供了一個(gè)focusin事件

方法一：$ele.focusin()

綁定$ele元素，不帶任何參數(shù)一般是用來指定觸發(fā)一個(gè)事件，一般用的比較少

點(diǎn)擊觸發(fā)

$("ele").focusin(function(){
    alert("觸發(fā)指定事件")
})
$("#test").mouseup(function(){
     $("ele").focusin()  //指定觸發(fā)事件 
});

方法二：$ele.focusin( handler )

綁定$ele元素，每次$ele元素觸發(fā)點(diǎn)擊操作會(huì)執(zhí)行回調(diào) handler函數(shù)，這樣可以針對(duì)事件的反饋?zhàn)龊芏嗖僮?/p>

點(diǎn)擊觸發(fā)

$("#test").focusin(function() {
    //this指向 div元素
});

方法三：$ele.focusin( [eventData ], handler )

使用與方法二一致，不過可以接受一個(gè)數(shù)據(jù)參數(shù)，這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題

點(diǎn)擊觸發(fā)

$("#test").focusin(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 傳遞數(shù)據(jù)
});

當(dāng)一個(gè)元素，或者其內(nèi)部任何一個(gè)元素失去焦點(diǎn)的時(shí)候，比如input元素，用戶在點(diǎn)擊失去焦的時(shí)候，如果開發(fā)者需要捕獲這個(gè)動(dòng)作，jQuery提供了一個(gè)focusout事件

方法一：$ele.focusout()

綁定$ele元素，不帶任何參數(shù)一般是用來指定觸發(fā)一個(gè)事件，可能一般用的比較少

點(diǎn)擊觸發(fā)

$("ele").focusout(function(){
    alert("觸發(fā)指定事件")
})
$("#test").mouseup(function(){
     $("ele").focusout()  //指定觸發(fā)事件 
});

方法二：$ele.focusout( handler )

綁定$ele元素，每次$ele元素觸發(fā)點(diǎn)擊操作會(huì)執(zhí)行回調(diào) handler函數(shù)

這樣可以針對(duì)事件的反饋?zhàn)龊芏嗖僮髁?/p>

點(diǎn)擊觸發(fā)

$("#test").focusout(function() {
    //this指向 div元素
}); 

方法三：$ele.focusout( [eventData ], handler )

使用與方法二一致，不過可以接受一個(gè)數(shù)據(jù)參數(shù)，這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題

點(diǎn)擊觸發(fā)

$("#test").focusout(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 傳遞數(shù)據(jù)
});

鼠標(biāo)有mousedown、mouseup之類的事件，這是根據(jù)人的手勢(shì)動(dòng)作分解的2個(gè)觸發(fā)行為。相對(duì)應(yīng)的鍵盤也有這類事件，將用戶行為分解成2個(gè)動(dòng)作，鍵盤按下與松手，針對(duì)這樣的2種動(dòng)作，jQuery分別提供了對(duì)應(yīng)keydown與keyup方法來監(jiān)聽

keydown事件

當(dāng)用戶在一個(gè)元素上第一次按下鍵盤上字母鍵的時(shí)候，就會(huì)觸發(fā)它。使用上非常簡單，與基本事件參數(shù)處理保持一致，這里使用不在重復(fù)了，列出使用的方法

//直接綁定事件
$elem.keydown( handler(eventObject) )
//傳遞參數(shù)
$elem.keydown( [eventData ], handler(eventObject) )
//手動(dòng)觸發(fā)已綁定的事件
$elem.keydown() 

keyup事件

當(dāng)用戶在一個(gè)元素上第一次松手鍵盤上的鍵的時(shí)候，就會(huì)觸發(fā)它。使用方法與keydown是一致的只是觸發(fā)的條件是方法的

注意

keydown是在鍵盤按下就會(huì)觸發(fā)

keyup是在鍵盤松手就會(huì)觸發(fā)

理論上它可以綁定到任何元素，但keydown / keyup事件只是發(fā)送到具有焦點(diǎn)的元素上，不同的瀏覽器中，可獲得焦點(diǎn)的元素略有不同，但是表單元素總是能獲取焦點(diǎn)，所以對(duì)于此事件類型表單元素是最合適的

在input元素上綁定keydown事件會(huì)發(fā)現(xiàn)一個(gè)問題：

每次獲取的內(nèi)容都是之前輸入的，當(dāng)前輸入的獲取不到

keydown事件觸發(fā)在文字還沒敲進(jìn)文本框，這時(shí)如果在keydown事件中輸出文本框中的文本，得到的是觸發(fā)鍵盤事件前的文本，而keyup事件觸發(fā)時(shí)整個(gè)鍵盤事件的操作已經(jīng)完成，獲得的是觸發(fā)鍵盤事件后的文本

當(dāng)瀏覽器捕獲鍵盤輸入時(shí)，還提供了一個(gè)keypress的響應(yīng)，這個(gè)跟keydown是非常相似，這里使用請(qǐng)參考keydown這一節(jié)，具體說說不同點(diǎn)

keypress事件與keydown和keyup的主要區(qū)別

只能捕獲單個(gè)字符，不能捕獲組合鍵

無法響應(yīng)系統(tǒng)功能鍵（如delete，backspace）

不區(qū)分小鍵盤和主鍵盤的數(shù)字字符

KeyPress主要用來接收字母、數(shù)字等ANSI字符，而 KeyDown 和 KeyUP 事件過程可以處理任何不被 KeyPress 識(shí)別的擊鍵。諸如：功能鍵（F1-F12）、編輯鍵、定位鍵以及任何這些鍵和鍵盤換檔鍵的組合等