第4章：jQuery事件

1、jQuery第四章：第四章： jQuery中的事件中的事件目錄目錄l常用簡(jiǎn)單事件常用簡(jiǎn)單事件鼠標(biāo)事件鼠標(biāo)事件鍵盤事件鍵盤事件 表單事件表單事件綁定事件綁定事件移除事件移除事件l復(fù)合事件復(fù)合事件鼠標(biāo)光標(biāo)懸停鼠標(biāo)光標(biāo)懸停鼠標(biāo)連續(xù)點(diǎn)擊鼠標(biāo)連續(xù)點(diǎn)擊網(wǎng)頁中的事件網(wǎng)頁中的事件l和和winform一樣，在網(wǎng)頁中的事件也是實(shí)現(xiàn)和用戶交互的一樣，在網(wǎng)頁中的事件也是實(shí)現(xiàn)和用戶交互的基礎(chǔ)基礎(chǔ)l例如例如tab頁切換效果，可以通過鼠標(biāo)點(diǎn)擊事件來實(shí)現(xiàn)頁切換效果，可以通過鼠標(biāo)點(diǎn)擊事件來實(shí)現(xiàn)點(diǎn)擊選項(xiàng)卡，切換點(diǎn)擊選項(xiàng)卡，切換jQuery中的事件中的事件ljQuery事件是對(duì)事件是對(duì)JavaScript事件的封裝事件的封裝l事件

2、處理程序指的是當(dāng)事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時(shí)所調(diào)用的中發(fā)生某些事件時(shí)所調(diào)用的方法方法l常用事件分類如下：常用事件分類如下：基礎(chǔ)事件基礎(chǔ)事件window事件事件鼠標(biāo)事件鼠標(biāo)事件鍵盤事件鍵盤事件表單事件表單事件復(fù)合事件是多個(gè)事件的組合復(fù)合事件是多個(gè)事件的組合鼠標(biāo)光標(biāo)懸停鼠標(biāo)光標(biāo)懸停鼠標(biāo)連續(xù)點(diǎn)擊鼠標(biāo)連續(xù)點(diǎn)擊鼠標(biāo)事件鼠標(biāo)事件l鼠標(biāo)事件是當(dāng)用戶在文檔上移動(dòng)或單擊鼠標(biāo)時(shí)而產(chǎn)生的事鼠標(biāo)事件是當(dāng)用戶在文檔上移動(dòng)或單擊鼠標(biāo)時(shí)而產(chǎn)生的事件件l常用鼠標(biāo)事件常用鼠標(biāo)事件方法方法描述描述執(zhí)行時(shí)機(jī)執(zhí)行時(shí)機(jī)click( )觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的的click事件事件單擊鼠標(biāo)

3、時(shí)單擊鼠標(biāo)時(shí)mouseover( )觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的的mouse over事件事件鼠標(biāo)移過時(shí)鼠標(biāo)移過時(shí)mouseout( )觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的的mouse out事件事件鼠標(biāo)移出時(shí)鼠標(biāo)移出時(shí)jQuery基本語法基本語法l鼠標(biāo)事件實(shí)現(xiàn)主導(dǎo)航特效鼠標(biāo)事件實(shí)現(xiàn)主導(dǎo)航特效$(function() $(#nav li).mouseover(function() /當(dāng)鼠標(biāo)移過當(dāng)鼠標(biāo)移過#nav li元素時(shí)元素時(shí) $(this). addClass(heightlight); /為鼠標(biāo)所在為鼠標(biāo)所在li元素添加樣式元素添加樣式 );

4、$(#nav li).mouseout(function() /當(dāng)鼠標(biāo)移出當(dāng)鼠標(biāo)移出#nav li元素時(shí)元素時(shí) $(this).removeClass(); /移除鼠標(biāo)所在移除鼠標(biāo)所在li元素的全部樣式元素的全部樣式 ););鍵盤事件鍵盤事件l用戶每次按下或者釋放鍵盤上的鍵時(shí)都會(huì)產(chǎn)生事件用戶每次按下或者釋放鍵盤上的鍵時(shí)都會(huì)產(chǎn)生事件l常用鍵盤事件常用鍵盤事件方法方法描述描述執(zhí)行時(shí)機(jī)執(zhí)行時(shí)機(jī)keydown( )觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的的keydown事件事件按下鍵盤時(shí)按下鍵盤時(shí)keyup( )觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的的keyup事件事件釋

5、放按鍵時(shí)釋放按鍵時(shí)keypress( )觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的的keypress事件事件產(chǎn)生可打印的字產(chǎn)生可打印的字符時(shí)符時(shí)鍵盤事件鍵盤事件l按鍵特效按鍵特效$(document).ready(function () $(document).keydown(function (event) if (event.keyCode = 13) /按回車鍵按回車鍵 alert(確認(rèn)要提交么？確認(rèn)要提交么？); ););事件對(duì)象事件對(duì)象event中中封裝了事件的參數(shù)封裝了事件的參數(shù)表單事件表單事件l當(dāng)元素獲得焦點(diǎn)時(shí)，會(huì)觸發(fā)當(dāng)元素獲得焦點(diǎn)時(shí)，會(huì)觸發(fā)focus事件，失去焦點(diǎn)時(shí)

6、，會(huì)事件，失去焦點(diǎn)時(shí)，會(huì)觸發(fā)觸發(fā)blur事件事件方法方法描述描述執(zhí)行時(shí)機(jī)執(zhí)行時(shí)機(jī)focus( )觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的的focus事件事件獲得焦點(diǎn)獲得焦點(diǎn)blur( )觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的的blur事件事件失去焦點(diǎn)失去焦點(diǎn)表單事件表單事件l焦點(diǎn)特效焦點(diǎn)特效$(document).ready(function () $(name=member).focus(function() $(this).addClass(input_focus); ); $(name=member).blur(function() $(this).remo

7、veClass(input_focus); ););當(dāng)元素獲得焦點(diǎn)時(shí)，添當(dāng)元素獲得焦點(diǎn)時(shí)，添加樣式加樣式當(dāng)元素失去焦點(diǎn)時(shí)，移當(dāng)元素失去焦點(diǎn)時(shí)，移除樣式除樣式表單事件練習(xí)表單事件練習(xí)l需求說明需求說明文本框獲得焦點(diǎn)時(shí)，文本框邊框的顯示效果（顏色）改變文本框獲得焦點(diǎn)時(shí)，文本框邊框的顯示效果（顏色）改變綁定事件綁定事件l除了使用事件名綁定事件外，還可以使用除了使用事件名綁定事件外，還可以使用bind()方法方法$(document).ready(function() $(inputname=event_1).bind(click,function() $(p).css(background-colo

8、r,#F30); ););click 事件類型事件類型function()處理函數(shù)處理函數(shù)綁定多個(gè)事件綁定多個(gè)事件lbind()方法還可以同時(shí)為多個(gè)事件綁定方法方法還可以同時(shí)為多個(gè)事件綁定方法$(document).ready(function () $(inputname=event_1).bind(mouseover: function () $(ul).css(display, none);,mouseout: function () $(ul).css(display, block);););為為mouseover綁定方法綁定方法為為mouseout綁定方法綁定方法移除事件移除事件l移

9、除事件使用移除事件使用unbind()方法，其語法如下：方法，其語法如下：unbind(type,fn)參數(shù)參數(shù)含義含義描述描述type事件類型事件類型主要包括：主要包括：blur、focus、click、mouseout等基礎(chǔ)事件，此外，還可以等基礎(chǔ)事件，此外，還可以是自定義事件是自定義事件fn處理函數(shù)處理函數(shù)用來綁定的處理函數(shù)用來綁定的處理函數(shù)當(dāng)當(dāng)unbind()不帶參數(shù)時(shí)，表示移除所綁定的全部事件不帶參數(shù)時(shí)，表示移除所綁定的全部事件var foo = function () / 處理某個(gè)事件的代碼處理某個(gè)事件的代碼 ; $(p).bind(click, foo); /當(dāng)點(diǎn)擊段落的時(shí)候會(huì)觸

10、發(fā)當(dāng)點(diǎn)擊段落的時(shí)候會(huì)觸發(fā) foo $(p).unbind(click, foo); / 再也不會(huì)被觸發(fā)再也不會(huì)被觸發(fā) foo鼠標(biāo)光標(biāo)懸停事件鼠標(biāo)光標(biāo)懸停事件lhover()方法相當(dāng)于方法相當(dāng)于mouseover與與mouseout事件的組合事件的組合$(#myaccound).hover( function() $(#menu_1).css(display,block); , function() $(#menu_1).css(display,none); );光標(biāo)移入時(shí)觸發(fā)光標(biāo)移入時(shí)觸發(fā)光標(biāo)移出時(shí)觸發(fā)光標(biāo)移出時(shí)觸發(fā)鼠標(biāo)連續(xù)鼠標(biāo)連續(xù)click事件事件ltoggle()方法用于模擬鼠標(biāo)連續(xù)方法用于模擬鼠標(biāo)連續(xù)click事件事件$(body).toggle( function () , function () , function () );第一次點(diǎn)擊觸發(fā)第一次點(diǎn)擊觸發(fā)第二次點(diǎn)擊觸發(fā)第二次點(diǎn)擊觸發(fā)第三次點(diǎn)擊觸發(fā)第三次點(diǎn)擊觸發(fā)$(body).toggle( function () $(this).css(background-color, red); , function () $(this).css(background-color, green); , function () $(thi