jQuery開(kāi)發(fā)基礎(chǔ)知識(shí)-4 jQuery中的事件機(jī)制

JavaScript高級(jí)編程任務(wù)1

jQuery開(kāi)發(fā)基礎(chǔ)知識(shí)教學(xué)內(nèi)容1.1JavaScript簡(jiǎn)介1.2jQuery概述1.3jQuery選擇器1.4jQuery中元素的查找操作1.5jQuery中操作DOM元素的幾個(gè)基本方法1.6jQuery中的事件機(jī)制1.7實(shí)例開(kāi)發(fā)-實(shí)現(xiàn)輸入框外圍的陰影1.6jQuery中的事件機(jī)制事件機(jī)制包括對(duì)事件的注冊(cè)和注銷注冊(cè)事件on()方法、事件的快捷方法和one()方法注銷事件off()方法1.6jQuery中的事件機(jī)制使用on()方法注冊(cè)事件格式：$(selector).on(event,childSelector,data,function)參數(shù)：event，必需，規(guī)定添加到元素的一個(gè)或多個(gè)事件，由空格分隔多個(gè)事件；childSelector，可選，如果需要將事件添加給selector的后代元素，需要使用該參數(shù)規(guī)定要添加到哪個(gè)后代元素上，也就是說(shuō)，使用on()方法可以通過(guò)祖先元素為后代元素添加事件；如果某個(gè)元素是使用腳本動(dòng)態(tài)生成的，若是在不同的作用域中該元素自身無(wú)法注冊(cè)事件，必須要通過(guò)其祖先元素使用on()方法為該元素添加事件；data，可選，規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)，該參數(shù)較少使用，如果使用，則需要為function函數(shù)設(shè)置參數(shù)event，并通過(guò)event.data方式訪問(wèn)這組數(shù)據(jù)；function，必需，規(guī)定當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。on()方法使用on()可以為同一個(gè)元素的多個(gè)事件綁定相同的函數(shù)。還可以使用如下形式為不同的事件綁定不同的函數(shù)：$(selector).on({event:function,event:function,...})為同一個(gè)元素注冊(cè)不同的事件函數(shù)，函數(shù)可以是相同的，也可以是不同的。on()方法示例【示例1-13】on.html頁(yè)面中有兩個(gè)button按鈕元素，為第一個(gè)按鈕綁定click和mouseout事件函數(shù)，同時(shí)傳遞一組數(shù)據(jù){"name":"張三","age":20}，函數(shù)中彈出消息框顯示數(shù)據(jù)；為第二個(gè)按鈕綁定mousedown事件函數(shù)，設(shè)置窗口背景為#aaf顏色，綁定mouseup事件函數(shù)，設(shè)置窗口背景為#faa顏色。on()方法示例【示例1-14】應(yīng)用on為子元素注冊(cè)事件.html頁(yè)面中初始只有一個(gè)按鈕和包含一個(gè)段落的div元素，單擊按鈕時(shí)為該div添加一個(gè)段落子元素；之后為段落子元素注冊(cè)單擊事件函數(shù)，輸出段落中的文本。jQuery中的事件方法jQuery中定義了一些快捷方法為特定的事件類型綁定事件處理函數(shù)使用快捷方法修改示例1-13思考問(wèn)題能否使用圖示代碼修改示例1-14，為什么？one()方法one()方法為被選元素附加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。當(dāng)使用one()方法時(shí)，每個(gè)元素只能運(yùn)行一次事件處理器函數(shù)。如果是祖先元素為后代元素注冊(cè)事件，則只有第一次被操作的后代元素能夠運(yùn)行一次事件函數(shù)one()方法的格式和用法與on()方法相同。若div內(nèi)部有多個(gè)段落，只能輸出第一次被點(diǎn)擊的段落的文本，且只能操作一次思考問(wèn)題上面代碼能否設(shè)置所有的段落顏色為紅色（包括新增的段落），為什么？注銷事件-off()方法格式：$(selector).off(event,selector,function(eventObj),map)參數(shù)說(shuō)明：event，必需，規(guī)定要從被選元素移除的一個(gè)或多個(gè)事件或命名空間，由空格分隔多個(gè)事件；selector，可選，如果是由父元素使用on()方法為子元素注冊(cè)了事件，要注銷該事件時(shí)仍舊需要通過(guò)父元素應(yīng)用off()方法，此時(shí)需要使用該參數(shù)，而且該參數(shù)必須要與on()方法中使用的參數(shù)是一致的；function(eventObj) 可選，規(guī)定當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)；map，可選，規(guī)定事件映射({event:function,event:function,...})，包含要添加到元素的一個(gè)或多個(gè)事件，以及當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。應(yīng)用off()方法使用任何形式為元素$(selector)自身注冊(cè)的任何事件函數(shù)都可通過(guò)$(selector).off(event)的形式注銷，例如，對(duì)段落元素使用on()或者click()注冊(cè)了自身的click事件函數(shù)，都可直接注銷應(yīng)用off()方法由父元素使用on()方法為子元素注冊(cè)的事件，必須要由父元素為其注銷，例如右側(cè)代碼注銷無(wú)效需要使用下面形式注銷能否使用下面代碼注銷？為什么？第二個(gè)參數(shù)使用的#p1與注冊(cè)事件時(shí)的第二個(gè)參數(shù)p雖然在本頁(yè)面中所指的是同一個(gè)元素，但是因?yàn)閷?xiě)法是不同的，所以無(wú)效。為div設(shè)置陰影任務(wù)要求右側(cè)登錄界面中有兩個(gè)輸入框，分別是賬號(hào)輸入框和密碼輸入框，賬號(hào)輸入框和前面的人形小圖標(biāo)，放在一個(gè)div中，密碼輸入框和前面的小鎖圖標(biāo)放在一個(gè)div中，當(dāng)用戶將光標(biāo)放入輸入框中時(shí)，外部的div會(huì)顯示陰影效果，如圖中密碼框外部div的陰影，當(dāng)用戶將光標(biāo)離開(kāi)輸入框時(shí)，外部div的陰影消失。上圖的人形圖標(biāo)、小鎖圖標(biāo)以及登錄和取消按鈕的背景都是根據(jù)下面背景圖bg_v3.png中的相應(yīng)圖標(biāo)進(jìn)行背景圖定位設(shè)置的。小人圖標(biāo)：150px，62px小鎖圖標(biāo)：175px，62px深色按鈕圖標(biāo)：0，210px淺色按鈕：120px，210px外圍大框，類名divLogin，寬度260像素，填充10像素，邊框圓角.divLeft，20*20，背景圖bg_v3.png，向左浮動(dòng).divLeft1，背景圖位置-150px-62px.divLeft2，背景圖位置-175px

-62px.divRight，215*20，左邊距5像素，向左浮動(dòng).divRight>input，210*20，填充邊距0，邊框0，沒(méi)有外線框.login和.cancel，110*40，圓角邊框背景圖位置分別是0-210px和-120px-21