十年網(wǎng)站開發(fā)經(jīng)驗(yàn) + 多家企業(yè)客戶 + 靠譜的建站團(tuán)隊(duì)
量身定制 + 運(yùn)營維護(hù)+專業(yè)推廣+無憂售后,網(wǎng)站問題一站解決
jQuery綁定點(diǎn)擊事件可以使用其綁定事件函數(shù)
為德安等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù),及德安網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站建設(shè)、網(wǎng)站制作、德安網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!
jquery中四個(gè)事件綁定方式(bind,live,delegate,on)
1、bind()????
簡要描述
bind()向匹配元素添加一個(gè)或多個(gè)事件處理器。
使用方式
$(selector).bind(event,data,function)
event:必需項(xiàng);添加到元素的一個(gè)或多個(gè)事件,例如 click,dblclick等;
單事件處理:例如?$(selector).bind("click",data,function);
多事件處理:
1.利用空格分隔多事件,例如?$(selector).bind("click dbclick mouseout",data,function);
2.利用大括號靈活定義多事件,例如?$(selector).bind({event1:function, event2:function, ...})
3.空格相隔方式:綁定較為死板,不能給事件單獨(dú)綁定函數(shù),適合處理多個(gè)事件調(diào)用同一函數(shù)情況;
大括號替代方式:綁定較為靈活,可以給事件單獨(dú)
綁定函數(shù);
data:可選;需要傳遞的參數(shù);
function:必需;當(dāng)綁定事件發(fā)生時(shí),需要執(zhí)行的函數(shù);
適用Jquery版本
適用所有版本,但是根據(jù)官網(wǎng)解釋,自從jquery1.7版本以后bind()函數(shù)推薦用on()來代替。
2、live()? ?
簡要描述
live()?向當(dāng)前或未來的匹配元素添加一個(gè)或多個(gè)事件處理器;
使用方式
$(selector).live(event,data,function)
event:必需項(xiàng);添加到元素的一個(gè)或多個(gè)事件,例如 click,dblclick等;
單事件處理:例如?$(selector).live("click",data,function);
多事件處理:1.利用空格分隔多事件,例如?$(selector).live("click dbclick mouseout",data,function);
2.利用大括號靈活定義多事件,例如?$(selector).live({event1:function, event2:function, ...})
3.空格相隔方式:綁定較為死板,不能給事件單獨(dú)綁定函數(shù),適合處理多個(gè)事件調(diào)用同一函數(shù)情況;
大括號替代方式:綁定較為靈活,可以給事件單獨(dú)綁定函數(shù);
data:可選;需要傳遞的參數(shù);
function:必需;當(dāng)綁定事件發(fā)生時(shí),需要執(zhí)行的函數(shù);
適用Jquery版本
jquery1.9版本以下支持,jquery1.9及其以上版本刪除了此方法,jquery1.9以上版本用on()方法來代替。
3、delegate()
簡要描述
delegate()?為指定的元素(被選元素的子元素)添加一個(gè)或多個(gè)事件處理程序,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。使用 delegate() 方法的事件處理程序適用于當(dāng)前或未來的元素(比如由腳本創(chuàng)建的新元素)。
使用方式
$(selector).delegate(childSelector,event,data,function)
childSelector:?必需項(xiàng);需要添加事件處理程序的元素,一般為selector的子元素;
event:必需項(xiàng);添加到元素的一個(gè)或多個(gè)事件,例如 click,dblclick等;
單事件處理:例如?$(selector).delegate(childselector,"click",data,function);
多事件處理:1.利用空格分隔多事件,例如?$(selector).delegate(childselector,"click?dbclick mouseout",data,function);
2.利用大括號靈活定義多事件,例如?$(selector).delegate(childselector,{event1:function, event2:function, ...})
3.空格相隔方式:綁定較為死板,不能給事件單獨(dú)綁定函數(shù),適合處理多個(gè)事件調(diào)用同一函數(shù)情況;
大括號替代方式:綁定較為靈活,可以給事件單獨(dú)綁定函數(shù);
data:可選;需要傳遞的參數(shù);
function:必需;當(dāng)綁定事件發(fā)生時(shí),需要執(zhí)行的函數(shù);
適用Jquery版本
jquery1.4.2及其以上版本;
4、on()
簡要描述
on()?為指定的元素,添加一個(gè)或多個(gè)事件處理程序,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。使用 on() 方法的事件處理程序適用于當(dāng)前或未來的元素(比如由腳本創(chuàng)建的新元素)。
使用方式
$(selector).on(event,childselector,data,function)
event:必需項(xiàng);添加到元素的一個(gè)或多個(gè)事件,例如 click,dblclick等;
單事件處理:例如?$(selector).on("click",childselector,data,function);
多事件處理:1.利用空格分隔多事件,例如?$(selector).on("click?dbclick mouseout",childseletor,data,function);
2.利用大括號靈活定義多事件,例如?$(selector).on({event1:function, event2:function, ...},childselector);
3.空格相隔方式:綁定較為死板,不能給事件單獨(dú)綁定函數(shù),適合處理多個(gè)事件調(diào)用同一函數(shù)情況;
大括號替代方式:綁定較為靈活,可以給事件單獨(dú)綁定函數(shù);
childSelector:?可選;需要添加事件處理程序的元素,一般為selector的子元素;
data:可選;需要傳遞的參數(shù);
function:必需;當(dāng)綁定事件發(fā)生時(shí),需要執(zhí)行的函數(shù);
適用Jquery版本
jquery1.7及其以上版本;jquery1.7版本出現(xiàn)之后用于替代bind(),live()綁定事件方式;
四種方式的異同和優(yōu)缺點(diǎn)
相同點(diǎn):
1.都支持單元素多事件的綁定;空格相隔方式或者大括號替代方式;
2.均是通過事件冒泡方式,將事件傳遞到document進(jìn)行事件的響應(yīng);
比較和聯(lián)系:
1.bind()函數(shù)只能針對已經(jīng)存在的元素進(jìn)行事件的設(shè)置;但是live(),on(),delegate()均支持未來新添加元素的事件設(shè)置;
2.bind()函數(shù)在jquery1.7版本以前比較受推崇,1.7版本出來之后,官方已經(jīng)不推薦用bind(),替代函數(shù)為on(),這也是1.7版本新添加的函數(shù),同樣,可以
用來代替live()函數(shù),live()函數(shù)在1.9版本已經(jīng)刪除;
3.live()函數(shù)和delegate()函數(shù)兩者類似,但是live()函數(shù)在執(zhí)行速度,靈活性和CSS選擇器支持方面較delegate()差些
4.bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+;
總結(jié)
如果項(xiàng)目中引用jquery版本為低版本,推薦用delegate(),高版本jquery可以使用on()來代替,以上僅為個(gè)人看法
在1.8.0版本之前,我們要想獲取某個(gè)DOM綁定的事件處理程序可以這樣:
$.data(domObj,'events');//或者$('selector').data('events')
而從1.8.0版本開始,jQuery突然不支持這樣使用了,而是改到了一個(gè)叫'_data'的函數(shù)功能上了,即,1.8.0及以后的版本你可以這么用:
$._data(domObj,'events');//注意,這里不能像$('selector')._data('events')這樣用了。
要想寫出兼容兼容各個(gè)jQuery版本的方式,這樣獲取即可:
var?eventsData?=?$.data(domObj,'events')?||?$._data(domObj,'events');//這個(gè)改變在easyui?1.3.1的源碼中也有體?
ps:
1.接受的domObj節(jié)點(diǎn)必須為dom節(jié)點(diǎn)對象,不能為jquery對象,如果是獲取的jquery對象,要用get(0)或者[0]轉(zhuǎn)為dom對象
2.只能獲取到使用jquery方法綁定的參數(shù)?on?,live?等。如果是直接寫到元素上的事件是不能獲取的,使用其他非jquery設(shè)置的事件也是無法獲取的
實(shí)現(xiàn)的方法如下:
1、第一步,創(chuàng)建一個(gè)新的html文件,見下圖,轉(zhuǎn)到下面的步驟。
2、第二步,執(zhí)行完上面的操作之后,創(chuàng)建輸入框和按鈕,見下圖,轉(zhuǎn)到下面的步驟。
3、第三步,執(zhí)行完上面的操作之后,預(yù)覽效果見下圖,轉(zhuǎn)到下面的步驟。
4、第四步,執(zhí)行完上面的操作之后,需要引入jquery.js,見下圖,轉(zhuǎn)到下面的步驟。
5、第五步,執(zhí)行完上面的操作之后,設(shè)置輸入框的keydown事件與click事件,見下圖,轉(zhuǎn)到下面的步驟。
6、第六步,執(zhí)行完上面的操作之后,按鈕單擊觸發(fā)事件,見下圖,轉(zhuǎn)到下面的步驟。
7、第七步,執(zhí)行完上面的操作之后,單擊按鈕,效果見下圖。這樣,就解決了這個(gè)問題了。
首先引入jquery框架,輸入代碼:
#36(function()#36("textarea[name=phone_about]").keyup(function(){? #36;("#show").text(#36;(this).val().length);? });?})
當(dāng)然除此之外,還有另外一種代碼,適用于某些電腦:
#36;(document).ready(function(){#36;("#phone_about").keyup(function(){#36;("#show").html(#36;(this).val().length);?});});textarea id="phone_about" name="phone_about"/textareadiv id="show" style="display:inline;"0/div
選擇哪種方法時(shí),應(yīng)該根據(jù)情況而定。
引入相關(guān)的js,css。table的html。datatable排序功能被禁用的js, ordering:false(默認(rèn)情況下為true)。比較一下,如圖可以看到, 禁用排序時(shí),排序的箭頭沒有了。部分禁用排序功能,禁用第二列的排序功能。js如下。(默認(rèn)排序的總開關(guān)開啟,所以這里沒有在js里設(shè)置)??聪滦Ч?,第二列排序的箭頭沒了
jQuery中用on來綁定事件,常用寫法
兩種寫法哪個(gè)更好?
1. $(document).on 將事件委托document, $('#idname').on 將事件綁定到.className元素上。每次document有點(diǎn)擊動(dòng)作,瀏覽器都會(huì)判斷當(dāng)前點(diǎn)擊的對象。如果匹配再?zèng)Q定要不要執(zhí)行,多了個(gè)判斷環(huán)節(jié)。JS渲染效率很高,所以此異同基本可以忽略。
2. $("className").on 為onclick綁定,只有在頁面onload時(shí)執(zhí)行一次。頁面刷新后,新加載的具有className的元素便沒有事件綁定到上面了。相反$(document).on這種方法會(huì)刷新和重新賦予綁定操作,所以一定程度上更為全面。
1、新建一個(gè)靜態(tài)頁面bind.html,并引入jquery核心文件。
2、在body/body標(biāo)簽中,插入一個(gè)button按鈕,添加id屬性值。
3、在script/script標(biāo)簽中,添加按鈕點(diǎn)擊事件,利用on()方法綁定。
4、保存代碼并運(yùn)行項(xiàng)目,打開瀏覽器查看界面效果,點(diǎn)擊按鈕查看控制臺(tái)。
5、將on()方法改為bind()方法,然后保存代碼,點(diǎn)擊按鈕查看打印結(jié)果。
6、在jQuery3.0以下版本中,可以使用delegate()方法綁定點(diǎn)擊事件。
7、除了上述之外,還有l(wèi)ive()方法,不過這個(gè)方法jQuery1.7后就被廢棄了。