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

如：

KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲container').del…(‘#container’)，並使用click事件和’a’這一CSS選擇器作為引數把alert函式繫結到KaTeX parse error: Expected 'EOF', got '#' at position 3: (‘#̲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()