建站
咨詢
售后
建站咨詢
新聞中心
jQuery綁定事件on
jQuery中用on來綁定事件，常用寫法
創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)芮城,十多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220
兩種寫法哪個更好？
1. $(document).on 將事件委托document， $('#idname').on 將事件綁定到.className元素上。每次document有點擊動作，瀏覽器都會判斷當(dāng)前點擊的對象。如果匹配再決定要不要執(zhí)行，多了個判斷環(huán)節(jié)。JS渲染效率很高，所以此異同基本可以忽略。
2. $("className").on 為onclick綁定，只有在頁面onload時執(zhí)行一次。頁面刷新后，新加載的具有className的元素便沒有事件綁定到上面了。相反$(document).on這種方法會刷新和重新賦予綁定操作，所以一定程度上更為全面。
jquery綁定點擊事件的方法
jQuery綁定點擊事件可以使用其綁定事件函數(shù)
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：必需；當(dāng)綁定事件發(fā)生時，需要執(zhí)行的函數(shù)；
適用Jquery版本
適用所有版本，但是根據(jù)官網(wǎng)解釋，自從jquery1.7版本以后bind()函數(shù)推薦用on()來代替。
2、live()? ?
簡要描述
live()?向當(dāng)前或未來的匹配元素添加一個或多個事件處理器；
使用方式
$(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：必需；當(dāng)綁定事件發(fā)生時，需要執(zhí)行的函數(shù)；
適用Jquery版本
jquery1.9版本以下支持，jquery1.9及其以上版本刪除了此方法，jquery1.9以上版本用on()方法來代替。
3、delegate()
簡要描述
delegate()?為指定的元素（被選元素的子元素）添加一個或多個事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時運行的函數(shù)。使用 delegate() 方法的事件處理程序適用于當(dāng)前或未來的元素（比如由腳本創(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：必需；當(dāng)綁定事件發(fā)生時，需要執(zhí)行的函數(shù)；
適用Jquery版本
jquery1.4.2及其以上版本；
4、on()
簡要描述
on()?為指定的元素,添加一個或多個事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時運行的函數(shù)。使用 on() 方法的事件處理程序適用于當(dāng)前或未來的元素（比如由腳本創(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：必需；當(dāng)綁定事件發(fā)生時，需要執(zhí)行的函數(shù)；
適用Jquery版本
jquery1.7及其以上版本；jquery1.7版本出現(xiàn)之后用于替代bind()，live()綁定事件方式；
四種方式的異同和優(yōu)缺點
相同點：
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é)
如果項目中引用jquery版本為低版本，推薦用delegate(),高版本jquery可以使用on()來代替，以上僅為個人看法
jquery綁定事件有哪些方法
你好！
jquery綁定事件的方法，有兩種方式：
$(function(){
$("#btn").click(function(event){});
//這種方式是直接指定事件及處理函數(shù);
$("#btn").on("click",function(event){});
//這種方式，可以綁定一個或多個事件，事件的判斷在functon中通過event進(jìn)行判斷;
//jquery自1.9版本后，推薦事件綁定使用on()函數(shù)
});
希望對你有幫助！
jquery綁定事件on()方法
events:一個或多個用空格分隔的事件類型和可選的命名空間，如"click"或"keydown.myPlugin" 。
selector:一個選擇器字符串用于過濾器的觸發(fā)事件的選擇器元素的后代。如果選擇器為null或省略，當(dāng)它到達(dá)選定的元素，事件總是觸發(fā)。
data:當(dāng)一個事件被觸發(fā)時要傳遞event.data給事件處理函數(shù)。
fn:該事件被觸發(fā)時執(zhí)行的函數(shù)。 false 值也可以做一個函數(shù)的簡寫，返回false。
當(dāng)?shù)诙€參數(shù)'selector'為null時，on()和bind()其實在用法上基本上沒有任何區(qū)別了，所以我們可以認(rèn)為on()只是比bind()多了一個可選的'selector'參數(shù)，所以on()可以非常方便的替換掉bind()
在 1.4之前相信大家非常喜歡使用live(),因為它可以把事件綁定到當(dāng)前以及以后添加的元素上面，當(dāng)然在1.4之后delegate()也可以做類似的事情了。live()的原理很簡單，它是通過document進(jìn)行事件委派的，因此我們也可以使用on()通過將事件綁定到document來達(dá)到 live()一樣的效果。
1、live()寫法
2、on()寫法
這里的關(guān)鍵就是第二個參數(shù)'selector'在起作用了。它是一個過濾器的作用，只有被選中元素的后代元素才會觸發(fā)事件。
delegate() 是1.4引入的，目的是通過祖先元素來代理委派后代元素的事件綁定問題，某種程度上和live()優(yōu)點相似。只不過live()是通過document元素委派，而delegate則可以是任意的祖先節(jié)點。使用on()實現(xiàn)代理的寫法和delegate()基本一致。
1、delegate()的寫法
2、on()寫法
貌似第一個和第二個參數(shù)的順序顛倒了一下，別的基本一樣。
網(wǎng)站題目：jquery的綁定事件,jquery 綁定事件
標(biāo)題URL：http://www.dlmjj.cn/article/dsiiesj.html
