1. 程式人生 > >jQuery基礎——事件

jQuery基礎——事件

htm move 屬性 動作 類型 top 分享 image png

1、click與dbclick事件

  click:單擊事件

  dbclick:雙擊事件

  方法一:$ele.click()

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

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

  技術分享圖片

  註意:在同一個元素同時綁定click與dbclick事件是不可取的。各個瀏覽器事件觸發的順序是不同的。

2、mousedown與mouseup事件

  mousedown:鼠標按下的操作

  mouseup:鼠標松開的操作

  方法一:$ele.mousedown()

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

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

3、mousemove事件

  mousemove:監聽用戶移動的操作。

4、mouseover與mouseout事件

  mouseover:移入

  mouseout:移除

5、mouseenter與mouseleave事件

  監聽用戶是否移動到內部的操作。

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

  mouseenter事件和mouseover的區別:

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

  技術分享圖片

6、hover事件 

  技術分享圖片

7、focusin事件

  當一個元素獲取焦點時觸發的事件。

  技術分享圖片

  技術分享圖片

8、focusout事件

  當一個元素失去焦點時觸發的事件。

9、focus與blur事件

  技術分享圖片

10、change事件

  <input><textarea><select>的值都是可以改變的,可以通過change事件去監聽這些改變的動作。

  技術分享圖片

11、select事件

  當textarea或文本類型的input元素中的文本被選擇時,會發生select事件。

  註意:select事件只能用於<input>元素與<textarea>元素

12、submit事件

  技術分享圖片

13、keydown()與keyup()事件

  鍵盤的按下與松手事件

14、keypress()事件

  在input元素上綁定keydown事件會發現一個問題:

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

  技術分享圖片

15、on()的多事件綁定

  基本用法:.on( events ,[ selector ] ,[ data ] )

  技術分享圖片

  技術分享圖片

16、卸載事件off()

  技術分享圖片

  技術分享圖片

17jQuery事件對象的作用

  事件委托

 事件對象是用來記錄一些事件發生時的相關信息的對象。事件對象只有事件發生時才會產生,並且只能是事件處理函數內部訪問,在所有事件處理函數運行結束後,事件對象就被銷毀

  技術分享圖片

  技術分享圖片

18、jQuery事件對象的屬性和方法

  event.type:獲取事件的類型

  event.pageX 和 event.pageY:獲取鼠標當前相對於頁面的坐標

  event.preventDefault() 方法:阻止默認行為

  event.stopPropagation() 方法:阻止事件冒泡

  event.which:獲取在鼠標單擊時,單擊的是鼠標的哪個鍵

  event.currentTarget : 在事件冒泡過程中的當前DOM元素

  技術分享圖片

19、trigger事件

    技術分享圖片

jQuery基礎——事件