jQuery常用事件

Jquery事件

(一)、事件列表。

1.blur()　　　　　　當失去焦點時觸發。包括鼠標點擊離開和TAB鍵離開。

2.change()　　　　 當元素獲取焦點后，值改變失去焦點事觸發。

3.click()　　　　　　當鼠標單擊時觸發。

4.dblclick()　　　　 當鼠標雙擊時觸發。

5.error()　　　　　 當javascript出錯或img的src屬性無效時觸發。

6.focus()　　　　   當元素獲取焦點時觸發。注意：某些對象不支持。

7.focusin()　　　   當元素或其子元素獲取焦點時觸發，與focus()區別在于能夠檢測其內部子元素獲取焦點的情況。

8.focusout()　　　 當元素或者其子元素失去焦點時觸發，與focusout()區別在于能夠檢測內部子元素失去焦點的情況。

9.keydown()　　   當鍵盤按下時觸發。

10.keyup()　　　　當按鍵松開時觸發。

11.mousedown()　　　　當鼠標在元素上點擊后觸發。

12.mouseenter()　　　　當鼠標在元素上穿過時觸發。mouseenter與mouseover的區別是，鼠標從mouseover的子元素上穿過時也會觸發而mouseenter不會。

13.mouseleave()　　　　當鼠標從元素上移出時觸發。

14.mousemove()　　　  當鼠標在元素上移動時觸發。.clientX 和 .clientY分別代表鼠標的X坐標與Y坐標。

15.mouseout()　　　　   當鼠標從元素上移開時觸發。

16.mouseover()　　　　 當鼠標移入元素時觸發。

17.mouseup()　　　　    當鼠標左鍵按下釋放時觸發。

18.resize()　　　　　　   當瀏覽器窗口大小改變時觸發。 $(window).resize();

19.scroll()　　　　　　　 當滾動條發生變化時觸發。

20.select()　　　　　　   當input里的內容被選中時觸發。

21.submit()　　　　　　 提交選中的表單。

22.unload()　　　　　　 當頁面卸載時觸發。

(二)、事件常用方法

1、綁定事件

語法：bind(type,[data],fn)　　type參數可以是頂部的22個方法(注意：不能帶括號); 參數data是屬性值傳遞給事件對象的額外數據，fn是處理函數。可以bind多個事件，也可以為同一事件綁定多個函數。

$("#div1").bind("change",function(){ alert("你好！"); })

$("#div1").bind("click mouseout",function(){ alert("你好！"); })

2、切換事件

 語法：hover(fn1,fn2);　　　　鼠標移入執行第一個函數，鼠標移出執行第二個函數。相當于mouseenter與mouseleave。

$("#div1").hover(function(){alert("鼠標移入我啦");},function(){alert("鼠標移出我啦!");})

3、順序執行事件

 語法：toggle(fn1,fn2,fn3...)　  當鼠標單擊時，依次執行綁定的事件

$("#div1").toggle(function(){alert(1);},function(){alert(2);},function(){alert(3);})

4、unbind 移除事件

語法：unbind([type],[fn])　　　　 移除元素已經綁定的事件,type：指定要移除的事件，fn指定要移除的方法。當沒有參數時，所有的事件都移除。注意，用live()方法綁定的方法移出不了，live()綁定的方法要用它自己的die()來移出。

$(":button").unbind();　　   移除按鈕的所有事件。

$(":button").unbind("click");　　   移除按鈕的單擊事件。

$(":button").unbind("click",fn1);　　   移除按鈕的單擊事件中的fn1函數，如果該事件綁定了多個函數，對其他函數沒影響。

 5、one 僅執行一次的事件

語法：one(type,[data],fn)　　　　綁定一個僅執行一次的事件

$("#div1").one("click",function(){ alert("我只執行一次!"); })

6、trigger DOM加載完畢后自動執行的事件

語法：trigger(type,[data])　　　　DOM元素加載完成后自動執行

$("#div1").bind("bclick",function(){ alert("你好"); });

$("#div1").trigger("bclick");　　　　//注意，trigger一定要放在綁定的事件之后，否則不執行。

7、live() DOM根節點綁定事件

語法：live(type,[fn])　　　　　String,Function

live(type,[data],false)    String,Array,bool

live()在根節點綁定事件，通過事件冒泡到DOM根節點($(ducoment))，再對比觸發事件的元素來判斷事件是否應該執行。效率不高，因此不能完全替代bind()但是有個好處，就是后期加載出來的元素同樣能夠綁定。但是有個缺點，就是live()方法僅僅能使用CSS選擇器選擇被綁定元素。

如$('a').live('click', function() {alert("你好!");})　　JQuery把alert函數綁定到$(document)元素上，并使用’click’和’a’作為參數。任何時候只要有事件冒泡到document節點上，它就查看該事件是否是一個click事件，以及該事件的目標元素與’a’這一CSS選擇器是否匹配，如果都是的話，則執行函數。

live(type,data,fn)

$("#div1").live("click",function(){ alert("你好"); })　　//即使頁面一開始不存在id="div1"的元素，是后期AJAX或js加載上去的，但是依然有效。

$("#div1").live("click mouseout",function(){ alert("你好"); })　 //可以live()多個事件。

8、die() 解除live()方法綁定的事件　　//綁定與解除是對應的，die()解除不了bind()和delegate綁定的方法。 可以為一個元素live多個事件，也可以為同一事件live多個函數。

語法die(type,[fn])　　string Function其中Function為可選方法。

$("#div1").die();

$("#div1").die("click");

$("#div1").die("click",fn1);　　//其中fn1為某函數名。如果是綁定的是一個匿名函數，第二個參數用于當為同一事件live了多個函數的時候，解除一個函數對其他函數沒影響。

9、delegate() 為指定的元素添加一個或多個事件，并綁定處理函數，一個事件也可以綁定多個函數。注意：此函數要1.4.2版添加。delegate()允許在父元素中將時間綁定當前頁面還未的元素，這點與Live()類似，但是即使是$(document).delegate()也比live()方法的效率要高，另外 delegate()還能將尚未出現的元素綁定到離它更近的父元素上。

語法：

delegate(selector,[type],fn)　　　　String String Function　　//selector必須為所選元素的子元素

delegate(selector,[type],[data],fn)  String String Object Function

delegate(selector,events)　　　　　 String String

如：

$('#container').delegate('a', 'click', function() { alert("你好!") }); 
JQuery掃描文檔查找$(‘#container’)，并使用click事件和’a’這一CSS選擇器作為參數把alert函數綁定到$(‘#container’)上。任何時候只要有事件冒泡到$(‘#container’)上，它就查看該事件是否是click事件，以及該事件的目標元素是否與CCS選擇器相匹配。如果兩種檢查的結果都為真的話，它就執行函數。

$("#div1").delegate("#button1","click",function(){ alert("你好啊！"); });　　//注意：#button1必須為#div1的子元素

10、undelegate()　 刪除有delegate()函數綁定的一個或多個事件處理函數

語法：

undelegate(selector,[type])　　　　String String

undelegate(selector,[type],fn)　　  String String Function

undelegate(selector,events)　　　　String String

undelegate(namespace)　　　　　　String

11、ready()　　當DOM元素加載完成后綁定處理事件

$(document).ready()