第4章：jQuery事件

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

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

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

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

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

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

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

8、r,#F30); ););click 事件類型事件類型function()處理函數(shù)處理函數(shù)綁定多個事件綁定多個事件lbind()方法還可以同時為多個事件綁定方法方法還可以同時為多個事件綁定方法$(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ù)當當unbind()不帶參數(shù)時，表示移除所綁定的全部事件不帶參數(shù)時，表示移除所綁定的全部事件var foo = function () / 處理某個事件的代碼處理某個事件的代碼 ; $(p).bind(click, foo); /當點擊段落的時候會觸

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