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