jquery常用事件（整理）

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()