RIA應用開發(fā)：5-jQuery事件處理

1、第五章 jQuery事件處理回顧DOM元素的操作創(chuàng)建元素插入元素刪除元素替換元素復制元素DOM屬性的操作學習目標頁面載入事件（ready()）事件處理（bind()、 unbind()、one()）事件委派（live()、die()）事件切換（hover()、toggle()）常用事件瀏覽器事件表單事件鍵盤事件鼠標事件加載頁面jQuery提供了一個名為ready的事件處理方法，用來響應window對象的load事件并執(zhí)行各種任務(wù)。ready方法可以在DOM載入就緒能夠讀取并操作時立即調(diào)用被綁定的函數(shù)。ready方法不僅具有瀏覽器兼容性，而且允許注冊多個事件處理程序，并在加載頁面后立即執(zhí)行任務(wù)。

2、在一個頁面中可以對ready方法進行多次調(diào)用，每次都會注冊一個事件處理程序。當頁面加載就緒后，函數(shù)會按照定義的先后順序依次執(zhí)行。加載頁面$(document).ready(function() / 在這里寫你的代碼. ); $().ready(function() / 在這里寫你的代碼. ); $(function() / 在這里寫你的代碼. ); 事件處理bind()方法：將一個處理程序附加到每個匹配元素的事件上并返回jQuery對象。 bind(type, data, fn) type：字符串，一個或多個javaScript事件類型， 多個事件類型時用空格分隔各類型data：Map類型，要

3、傳遞的數(shù)據(jù)fn：觸發(fā)該事件時要執(zhí)行的函數(shù)事件處理$(#div1).bind(click,function()alert(click div!););$(#div1).bind(mouseenter mouseleave, function() $(this).toggleClass(selected); );$(#div1).bind(click, foo:bar,function(e)alert(e.data.foo););function handler(event) alert(event.data.foo); $(p).bind(click, foo: bar, handler) 事件

4、處理unbind()方法：將先前附加的事件處理程序從元素上移除并返回jQuery對象。使用bind方法附加的任何事件都可以使用unbind移除。unbind(type, fn) type：字符串，包含一個javaScript事件類型fn：當發(fā)生該事件時不再執(zhí)行該函數(shù) （要移除的事件處理程序）事件處理1.移除所有事件處理程序$(“#div”).unbind();2.移除指定事件類型的事件處理程序$(“#div”).unbind(“click”);事件處理 $(#div1).bind(click,function()alert(aaa);); $(#div1).unbind(click,funct

5、ion()alert(aaa);); var handle=function()alert(aaa); $(#div1).bind(click,handle); $(#div1).unbind(click,handle);如果要取消對特定處理程序的綁定，需要對該函數(shù)引用，而不是對執(zhí)行相同操作的不同函數(shù)的引用。事件處理one()方法：將事件處理程序附加到匹配元素的指定事件并返回jQuery對象。所附加的事件處理程序最多只能執(zhí)行一次，之后將自動取消綁定。one(type, data, fn) type：字符串，一個或多個javaScript事件類型， 多個事件類型時用空格分隔各類型data：Map

6、類型，要傳遞的數(shù)據(jù)fn：觸發(fā)該事件時要執(zhí)行的函數(shù)事件處理例：隨著鼠標的移動使圖像明亮或模糊 $(img).css(opacity,0.4); $(img).bind(mouseover,function()$(img).css(opacity,1.0);); $(img).bind(mouseout,function()$(img).css(opacity,0.4););事件處理練習：實現(xiàn)類似京東商城的商品展示效果。當鼠標移入某一個圖片時，圖片模糊，鼠標移出時恢復。事件委派live()方法：將一個事件處理程序附加到所有匹配的元素上，即使這個元素是以后再添加進來的也有效。live(type, d

7、ata, fn) type：字符串，一個或多個javaScript事件類型， 多個事件類型時用空格分隔各類型data：Map類型，要傳遞的數(shù)據(jù)fn：觸發(fā)該事件時要執(zhí)行的函數(shù)live()方法是bind() 方法的一個變體。bind() 方法會附加事件處理程序到匹配的元素，但以后再添加的元素則不會有，需要再使用一次bind() 才行。事件委派傳遞給 .live() 的事件處理函數(shù)不會綁定在元素上，而是把他作為一個特殊的事件處理函數(shù)，綁定在 DOM 樹的根節(jié)點上。.live() 方法能對一個還沒有添加進DOM的元素有效，是由于使用了事件委托：綁定在祖先元素上的事件處理函數(shù)可以對在后代上觸發(fā)的事件作出

8、回應。事件委派$(.clickme).bind(click, function() alert(Bound handler called.); ); $(body).append(Another target); $(.clickme).live(click, function() alert(Bound handler called.); );事件委派die()方法： 從元素上移除先前用live方法附加的事件處理程序并返回jQuery對象。die(type, fn)type：字符串，包含一個javaScript事件類型fn：當發(fā)生該事件時不再執(zhí)行該函數(shù) （要移除的事件處理程序）事件委派$(“

9、#div”).die();$(“#div”).die(“click”);var handle=function()alert(aaa); $(#div1).live(click,handle); $(#div1).die(click,handle);事件切換hover(over, out) 當鼠標移入一個匹配的元素時，觸發(fā)指定的第一個函數(shù)；當鼠標移出該元素時，觸發(fā)指定的第二個函數(shù)。伴隨著對鼠標是否仍然處在特定元素中的檢測，如果是，則會繼續(xù)保持“懸?！睜顟B(tài)，而不觸發(fā)移出事件。 $(td).hover( function () $(this).addClass(hover); , function

10、 () $(this).removeClass(hover); ); 事件切換toggle(fn, fn2, fn3, fn4, .) 每次點擊后依次調(diào)用函數(shù)。如果點擊了一個匹配的元素，則觸發(fā)指定的第一個函數(shù)，當再次點擊同一元素時，則觸發(fā)指定的第二個函數(shù)，如果有更多函數(shù)，則再次觸發(fā)，直到最后一個。隨后的每次點擊都重復對這幾個函數(shù)的輪番調(diào)用。 事件切換例：當鼠標懸停在某一行時高亮顯示。 $(tbody tr:even).addClass(even); $(tbody tr:odd).addClass(odd); $(tbody tr).hover(function()$(this).addCla

11、ss(selected);, function()$(this).removeClass(selected); 常用事件瀏覽器事件表單事件鍵盤事件鼠標事件瀏覽器事件load事件：當某個元素及其所有子元素已經(jīng)完全加載時，load事件將發(fā)送給該元素。unload事件：當用戶離開當前頁面時，unload事件將發(fā)送給window對象。error事件：發(fā)送到文檔中的引用并由瀏覽器加載的元素，如果未正確加載，則調(diào)用error事件處理程序。resize事件：當對象的大小將要發(fā)生變化時觸發(fā)的事件。scroll事件：當光標移動到一個元素中的不同地方時觸發(fā)。表單事件blue事件：當一個元素失去焦點時，將向該元素發(fā)

12、送blur事件。change事件：當一個元素的值發(fā)生變化時，將向該元素發(fā)送change事件。僅適用于單行文本框、文本區(qū)域和選擇框。對于選擇框，在用戶進行選擇時立即觸發(fā)；對于文本框和文本區(qū)域，將延遲到元素失去焦點時觸發(fā)。focus事件：當一個元素獲得焦點時，將向該元素發(fā)送focus事件。僅適用于表單域和超鏈接。表單事件select事件：當用戶在一個元素內(nèi)選定文本時，將向該元素發(fā)送select事件。事件僅適用于文本框和文本區(qū)域。submit事件：當用戶試圖提交表單時，將向表單元素發(fā)送submit事件。該事件只能附加到元素上。鍵盤事件keydown事件：當用戶在鍵盤上按下一個鍵時，將向元素發(fā)送key

13、down事件。keyup事件：當用戶在鍵盤上釋放一個鍵時，將向元素發(fā)送keyup事件。keypress事件：當瀏覽器在注冊鍵盤輸入時，將向元素發(fā)送keypress事件。為了確定鍵入哪個字符，可對傳入事件處理程序的事件對象進行檢查。在jQuery事件模型中，使用witch屬性可以檢索字符代碼。鍵盤事件例：獲取當前按鍵的值$(document).keydown(function (e) var code = 按鍵代碼 = + e.which + ; code+=, 字符 = + String.fromCharCode(e.which) + ; $(div.container).append(cod

14、e););$(document).keyup(function (e) if (e.which = 27) $(div.container).html(););鼠標事件click事件：當在某一個元素上按下并釋放鼠標按鈕時，向該元素發(fā)送click事件。dbclick事件：當雙擊一個元素時，將向該元素發(fā)送dbclick事件。focusin事件：當一個元素或其內(nèi)部的任何元素獲得焦點時，向該元素發(fā)送focusin事件。focusout事件：當一個元素或其內(nèi)部的任何元素失去焦點時，向該元素發(fā)送focusin事件。鼠標事件mousedown事件：當在某一個元素上按下鼠標按鈕時觸發(fā)mousedown事件。mouseup事件：當在某一個元素上釋放鼠標按鈕時觸發(fā)mousedown事件。mousemove事件：當在某個元素內(nèi)移動鼠標按鈕時觸發(fā)mousemove事件。mouseover事件：當鼠標進入某個元素時觸發(fā)該事件。mouseout事件：當鼠標移出某個元素時觸發(fā)該事件。常用事件例：創(chuàng)建下