jQuery的事件處理

標籤：綁定   style   簡寫   需要   方法   sem   fun   額外   自動   

1.文檔的載入事件

 執行時間

window.onload方法是在頁面中所有的DOM元素（包括元素的所有關聯檔案）完全載入到瀏覽器後才執行。

通過$(document).ready()方法註冊的事件處理函數，只要DOM元素載入完成就可以執行，不管元素所關聯的檔案是否載入完成。

 多次使用

Window.onload事件只能添加一個回呼函數。原因是JavaScript的onload事件一次只能儲存對一個函數的引用，它會自動用後面的函數覆蓋前面的函數（相當於重新賦值），因此不能在現有的行為上添加新的行為。

簡寫形式

$(document)可以簡寫為$()。當$()不帶參數時，預設參數就是“document”，因此可以簡寫為：

$().ready(function(){

//編寫代碼

});

2.綁定事件處理函數

on(events ,fn) 將一個或多個事件的處理方法綁定到被選擇的元素上。on()方法適用於當前或未來的元素，如用指令碼建立的新元素。

參數說明:

events:  一個或多個用空格分隔的事件類型

fn: 該事件被觸發時執行的函數。

on (events,{data},fn)

參數說明:

events: 一個或多個用空格分隔的事件類型

data: 需要傳遞的參數，作為event.data的屬性值

fn: 該事件被觸發時執行的函數。

bind(events ,fn)

參數說明:

events: 一個或多個用空格分隔的事件類型

fn: 該事件被觸發時執行的函數。

bind(events,{data},fn) 

 events: 指定綁定的事件名稱，多個參數用空格隔開

 data: 作為event.data屬性值傳遞給事件對象的額外資料對象

 fn: 回呼函數(事件處理函數)

Off(events, selector, fn)

Off();

events: 想要移除的事件名稱

selector: 移除那一個DOM節點的事件(必須和傳入的DOM節點一致)

fn: 想要移除的綁定函數

4,類比事件

trigger(type,data)

type: 指定要類比的事件名稱

data: 傳遞給事件處理函數的附加參數

5.鍵盤事件

keydown(Function)

功能描述：給鍵盤按下事件綁定處理函數。

參數說明：

　　Function: 表示鍵盤按下時要執行的函數。

.keypress(Function) 

　　功能描述：給鍵盤被按著不放的事件綁定處理函數。

參數說明：

　　Function: 表示鍵盤被按著不放時要執行的函數。

 .keyup(Function)

 功能描述：給鍵盤彈起事件綁定處理函數。

參數說明：

　　Function: 表示鍵盤彈起時要執行的函數。

6.滑鼠事件

.click(Function)

 功能描述：給按一下滑鼠事件綁定處理函數。

參數說明：

　　Function: 表示按一下滑鼠要執行的函數。

.dblclick(Function)

 功能描述：給滑鼠雙擊事件綁定處理函數。

參數說明：

　　Function: 表示滑鼠雙擊要執行的函數。

.mousedown(Function)

 功能描述：給滑鼠按下的事件綁定處理函數。

參數說明：

　　Function: 表示滑鼠按下後要執行的函數。

.mouseup()

 　　功能描述：給滑鼠彈起的事件綁定處理函數。

參數說明：

       Function: 表示滑鼠彈起後要執行的函數。

.mouseenter()

 功能描述：給滑鼠進入事件綁定處理函數。

參數說明：

       Function: 表示滑鼠進入元素時要執行的函數。

.mouseover()

        功能描述：給滑鼠進入到元素上的事件綁定處理函數。

參數說明：

        Function: 表示滑鼠進入到元素上時要執行的函數。

.mouseleave()

 功能描述：給滑鼠離開事件綁定處理函數。

參數說明：

         Function: 表示滑鼠離開元素時要執行的函數。

.mouseout()

         功能描述：給滑鼠離開後的事件綁定處理函數。

參數說明：

         Function: 表示滑鼠離開元素後要執行的函數。

.mousemove()

       功能描述：給滑鼠在元素上移動的事件綁定處理函數。

參數說明：

       Function: 表示滑鼠在元素上移動時要執行的函數。

.hover(inFunction, outFunction)

 功能描述：該事件是mouseenter()和mouseout()方法的簡寫形式。

參數說明：

      inFunction: 表示滑鼠剛進入元素邊界時要執行的函數。

      outFunction: 表示滑鼠剛離開元素邊界時要執行的函數。

 

jQuery的事件處理