jQuery 事件(一) 滑鼠與鍵盤事件

布still發表於2017-08-15
jQuery事件

jQuery 滑鼠事件

click與dbclick事件

用互動操作中，最簡單直接的操作就是點選操作。jQuery提供了兩個方法一個是click方法用於監聽使用者單擊操作，另一個方法是dbclick方法用於監聽使用者雙擊操作。這兩個方法的用法是類似的，下面以click()事件為例

方法一：$ele.click()

繫結$ele元素，不帶任何引數一般是用來指定觸發一個事件，用的比較少

<div id="test">點選觸發<div>
$("ele").click(function(){
    alert(`觸發指定事件`)
})
$("#test").click(function(){
     $("ele").click()  //手動指定觸發事件 
});

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

繫結$ele元素，每次$ele元素觸發點選操作會執行回撥 handler函式，這樣可以針對事件的反饋做很多操作了，方法中的this是指向了繫結事件的元素

<div id="test">點選觸發<div>
$("#test").click(function() {
    // this指向div元素
});

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

使用與方法二一致，不過可以接受一個資料引數，這樣的處理是為了解決不同作用域下資料傳遞的問題

<div id="test">點選觸發<div>
$("#test").click(11111,function(e) {
    //this指向div元素
    //e.data  => 11111 傳遞資料
});

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

dbclick與click事件的不同

click事件觸發需要以下幾點：

  • click事件其實是由mousedown與mouseup 2個動作構成，所以點選的動作只有在鬆手後才觸發

dblclick事件觸發需要以下幾點：

  • dblclick又是由2個click疊加而來的，所以dblclick事件只有在滿足以下條件的情況下才能被觸發
  • 滑鼠指標在元素裡面時點選
  • 滑鼠指標在元素裡面時釋放
  • 滑鼠指標在元素裡面時再次點選，點選間隔時間，是系統而定
  • 滑鼠指標在元素裡面時再次釋放

注意
在同一元素上同時繫結 click 和 dblclick 事件是不可取的。各個瀏覽器事件觸發的順序是不同的，一些瀏覽器在dblclick之前接受兩個 click 事件 ，而一些瀏覽器只接受一個 click 事件。使用者往往可通過不同的作業系統和瀏覽器配置雙擊靈敏度

mousedown與mouseup事件

jQuery提供了一個mousedown的快捷方法可以監聽使用者滑鼠按下的操作，與其對應的還有一個方法mouseup快捷方法可以監聽使用者滑鼠彈起的操作。兩種方法用法類似，下面以mousedown()為例

方法一：$ele.mousedown()

繫結$ele元素，不帶任何引數一般是用來指定觸發一個事件，一般用的比較少

<div id="test">點選觸發<div>
$("ele").mousedown(function(){
    alert(`觸發指定事件`)
})
$("#test").mousedown(function(){
     $("ele").mousedown()  //手動指定觸發事件 
});

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

繫結$ele元素，每次$ele元素觸發點選操作會執行回撥 handler函式，可以針對事件的反饋做很多操作

<div id="test">點選觸發<div>
$("#test").mousedown(function() {
    //this指向 div元素
});

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

使用與方法二一致，不過可以接受一個資料引數，這樣的處理是為了解決不同作用域下資料傳遞的問題

<div id="test">點選觸發<div>
$("#test").mousedown(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 傳遞資料
});

mousedown事件觸發需要需要：

  • mousedown強調是按下觸發
  • 如果在一個元素按住了滑鼠不放，並且拖動滑鼠離開這個元素，並釋放滑鼠鍵，這仍然是算作mousedown事件
  • 任何滑鼠按鈕被按下時都能觸發mousedown事件
  • 用event 物件的which區別按鍵，敲擊滑鼠左鍵which的值是1，敲擊滑鼠中鍵which的值是2，敲擊滑鼠右鍵which的值是3

mouseup事件觸發需要：

  • mouseup強調是鬆手觸發，與mousedown是相反的
  • mouseup與mousedown組合起來就是click事件
  • 如果使用者在一個元素上按下滑鼠按鍵，並且拖動滑鼠離開這個元素，然後釋放滑鼠鍵，這仍然是算作mouseup事件
  • 任何滑鼠按鈕鬆手時都能觸發mouseup事件
  • 用event 物件的which區別按鍵，敲擊滑鼠左鍵which的值是1，敲擊滑鼠中鍵which的值是2，敲擊滑鼠右鍵which的值是3

click與mousedown的區別

click事件其實是由mousedown於mouseup 2個動作構成，所以點選的動作只有在鬆手後才觸發

mousemove事件

用互動操作中，經常需要知道使用者是否有移動的操作。基於移動的機制可以做出拖動、拖拽一系列的效果出來。針對移動事件，jQuery提供了一個mousemove的快捷方法可以監聽使用者移動的的操作

方法一：$ele.mousemove()

繫結$ele元素，不帶任何引數一般是用來指定觸發一個事件，用的比較少

<div id="test">點選觸發<div>
$("ele").mousemove(function(){
    alert(`觸發指定事件`)
})
$("#test").click(function(){
     $("ele").mousemove()  //指定觸發事件 
});

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

繫結$ele元素，每次$ele元素觸發點選操作會執行回撥 handler函式，這樣可以針對事件的反饋做很多操作

<div id="test">滑動觸發<div>
$("#test").mousemove(function() {
    // this指向 div元素 
});

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

使用與方法二一致，不過可以接受一個資料引數，這樣的處理是為了解決不同作用域下資料傳遞的問題

<div id="test">點選觸發<div>
$("#test").mousemove(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 傳遞資料
});

mousemove事件觸發需要：

  • mousemove事件是當滑鼠指標移動時觸發的，即使是一個畫素
  • 如果處理器做任何重大的處理，或者如果該事件存在多個處理函式，這可能造成瀏覽器的嚴重的效能問題

mouseover與mouseout事件

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

方法一：$ele.mouseover()

繫結$ele元素，不帶任何引數一般是用來指定觸發一個事件，用的比較少

<div id="test">點選觸發<div>
$("ele").mouseover(function(){
    alert(`觸發指定事件`)
})
$("#test").click(function(){
     $("ele").mouseover()  //指定觸發事件 
});

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

繫結$ele元素，每次$ele元素觸發點選操作會執行回撥 handler函式，這樣可以針對事件的反饋做很多操作

<div id="test">滑動觸發<div>
$("#test").mouseover(function() {
    //this指向 div元素 
});

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

使用與方法二一致，不過可以接受一個資料引數，這樣的處理是為了解決不同作用域下資料傳遞的問題

<div id="test">點選觸發<div>
$("#test").mouseover(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 傳遞資料
});

mouseenter與mouseleave事件

用互動操作中，經常需要知道使用者操作滑鼠是否有移到元素內部或是元素外部，因此jQuery提供了一個mouseenter和mouseleave的快捷方法可以監聽使用者移動到內部的操作

使用上非常簡單，三種引數傳遞方式與mouseover和mouseout是一模一樣的，所以這裡不再重複，主要講講區別，下面以mouseenter為例：

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

mouseenter事件和mouseover的區別

關鍵點就是：冒泡的方式處理問題

mouseover為例：

<div class="aaron2">
    <p>滑鼠離開此區域觸發mouseleave事件</p>
</div>

如果在p元素與div元素都繫結mouseover事件，滑鼠在離開p元素，但是沒有離開div元素的時候，觸發的結果:

  1. p元素響應事件
  2. div元素響應事件

這裡的問題是div為什麼會被觸發？ 原因就是事件冒泡的問題，p元素觸發了mouseover，他會一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就會被觸發

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

mouseenter事件只會在繫結它的元素上被呼叫，而不會在後代節點上被觸發

hover事件

在元素上移進移出切換其換色，一般通過2個事件配合就可以達到，這裡用mouseenter與mouseleave，這樣可以避免冒泡問題

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

hover方法中只需傳遞2個回撥函式即可，不需要顯示的繫結2個事件

$(selector).hover(handlerIn, handlerOut)
  • handlerIn(eventObject)：當滑鼠指標進入元素時觸發執行的事件函式
  • handlerOut(eventObject)：當滑鼠指標離開元素時觸發執行的事件函式

focusin事件

當一個元素，或者其內部任何一個元素獲得焦點的時候，例如：input元素，使用者在點選聚焦的時候，如果開發者需要捕獲這個動作的時候，jQuery提供了一個focusin事件

方法一：$ele.focusin()

繫結$ele元素，不帶任何引數一般是用來指定觸發一個事件，一般用的比較少

<div id="test">點選觸發<div>
$("ele").focusin(function(){
    alert(`觸發指定事件`)
})
$("#test").mouseup(function(){
     $("ele").focusin()  //指定觸發事件 
});

方法二：$ele.focusin( handler )

繫結$ele元素，每次$ele元素觸發點選操作會執行回撥 handler函式，這樣可以針對事件的反饋做很多操作

<div id="test">點選觸發<div>
$("#test").focusin(function() {
    //this指向 div元素
});

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

使用與方法二一致，不過可以接受一個資料引數，這樣的處理是為了解決不同作用域下資料傳遞的問題

<div id="test">點選觸發<div>
$("#test").focusin(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 傳遞資料
});

focusout事件

當一個元素，或者其內部任何一個元素失去焦點的時候，比如input元素，使用者在點選失去焦的時候，如果開發者需要捕獲這個動作，jQuery提供了一個focusout事件

方法一：$ele.focusout()

繫結$ele元素，不帶任何引數一般是用來指定觸發一個事件，可能一般用的比較少

<div id="test">點選觸發<div>
$("ele").focusout(function(){
    alert(`觸發指定事件`)
})
$("#test").mouseup(function(){
     $("ele").focusout()  //指定觸發事件 
});

方法二：$ele.focusout( handler )

繫結$ele元素，每次$ele元素觸發點選操作會執行回撥 handler函式

這樣可以針對事件的反饋做很多操作了

<div id="test">點選觸發<div>
$("#test").focusout(function() {
    //this指向 div元素
});

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

使用與方法二一致，不過可以接受一個資料引數，這樣的處理是為了解決不同作用域下資料傳遞的問題

<div id="test">點選觸發<div>
$("#test").focusout(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 傳遞資料
});

jQuery 鍵盤事件

keydown()與keyup()事件

滑鼠有mousedown、mouseup之類的事件，這是根據人的手勢動作分解的2個觸發行為。相對應的鍵盤也有這類事件，將使用者行為分解成2個動作，鍵盤按下與鬆手，針對這樣的2種動作，jQuery分別提供了對應keydown與keyup方法來監聽

keydown事件

當使用者在一個元素上第一次按下鍵盤上字母鍵的時候，就會觸發它。使用上非常簡單，與基本事件引數處理保持一致，這裡使用不在重複了，列出使用的方法

//直接繫結事件
$elem.keydown( handler(eventObject) )
//傳遞引數
$elem.keydown( [eventData ], handler(eventObject) )
//手動觸發已繫結的事件
$elem.keydown()

keyup事件

當使用者在一個元素上第一次鬆手鍵盤上的鍵的時候，就會觸發它。使用方法與keydown是一致的只是觸發的條件是方法的

注意

  • keydown是在鍵盤按下就會觸發
  • keyup是在鍵盤松手就會觸發
  • 理論上它可以繫結到任何元素，但keydown / keyup事件只是傳送到具有焦點的元素上，不同的瀏覽器中，可獲得焦點的元素略有不同，但是表單元素總是能獲取焦點，所以對於此事件型別表單元素是最合適的

keypress()事件

在input元素上繫結keydown事件會發現一個問題：

每次獲取的內容都是之前輸入的，當前輸入的獲取不到

keydown事件觸發在文字還沒敲進文字框，這時如果在keydown事件中輸出文字框中的文字，得到的是觸發鍵盤事件前的文字，而keyup事件觸發時整個鍵盤事件的操作已經完成，獲得的是觸發鍵盤事件後的文字

當瀏覽器捕獲鍵盤輸入時，還提供了一個keypress的響應，這個跟keydown是非常相似，這裡使用請參考keydown這一節，具體說說不同點

keypress事件與keydown和keyup的主要區別

  • 只能捕獲單個字元，不能捕獲組合鍵
  • 無法響應系統功能鍵（如delete，backspace）
  • 不區分小鍵盤和主鍵盤的數字字元

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

相關文章