建站
咨詢
售后
建站咨詢
新聞中心
jquery綁定事件on()方法
events:一個或多個用空格分隔的事件類型和可選的命名空間，如"click"或"keydown.myPlugin" 。
成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站制作、成都網(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
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ù)的順序顛倒了一下，別的基本一樣。
jquery用on綁定事件
$(function(){
$('.btn').click(function(){
$('body').append('button?class-"btn"/button');
//注意上句錯誤。append的字符串中應(yīng)該是button?class="btn"/button?
});
$('.btn').on('click',function(){
console.log('haha');
});
//上面綁定的方式也不對。因為頁面剛加載時$('.btn')并不包括后來生成的button。
//而且你第一個button，和之后生成的button。都是class="btn"這樣就沒法區(qū)別了。
//所以最好的方式是，頁面本身存在的button和之后生成的button，不要叫一個名字。
//比如第一個button的class叫做btn-default，之后生成的button的class叫做btn-append
});
重新給你寫一個例子?？聪旅妫?/p>
HTML文件
html
head
script?src="jquery.js"/script
title演示/title
/head
body
button?id="btn-default"默認(rèn)按鈕/button
/body
/html
javascript文件
$('#btn-default').on('click',?function(){
$('body').append('button?class="btn-append"生成的按鈕/button');
});
$(document).on('click',?'.btn-append',?function(){
console.log('你剛才點擊了動態(tài)添加的按鈕');
});
動態(tài)添加的按鈕因為是后來才有的，所以必須采用上述時間代理的方式，來監(jiān)聽事件。
jquery on綁定事件是什么意思
on指的是事件委托，舉個例子，
$(document).on("click", ".ontest", function () {
//......
});
假設(shè)你的.ontest一開始不存在DOM結(jié)構(gòu)當(dāng)中，也就是html里面，如果你直接click(function () {});的話，事件是無法成功綁定的，而用on委托給document的話，在事件冒泡的時候，就可以成功出發(fā)綁定的事件。
JQuery的on()監(jiān)聽方法使用
jquery.on()超級方法
歸納
在jquery的on方法中實現(xiàn)事件委托就更簡單了，on方法可以接受三個參數(shù)：
第一個參數(shù)是事件名，可以只綁定一個事件，如on('click'),也可以綁定多個事件，如on('click dbclick mouseover')等
第二個參數(shù)是可選參數(shù)，接受一個selector,當(dāng)事件觸發(fā)元素符合selector時，會調(diào)用事件處理函數(shù)
注：此處用到 li:even 選擇器，后面有注解
第三個參數(shù)是自定義事件處理的回調(diào)函數(shù)。
1.jQuery :even 選擇器
選取每個帶有偶數(shù) index 值的元素（比如 2、4、6）
index 值從 0 開始，所有第一個元素是偶數(shù) (0)
2.jQuery :odd 選擇器
選取每個帶有奇數(shù) index 值的元素（比如 1、3、5）
jquery - 綁定事件on和bind的區(qū)別
如：
對.btn進(jìn)行綁定點擊事件，點擊.btn后會新增另一個.btn按鈕
點擊新增的btnAdd按鈕后無法觸發(fā)事件
所以需要利用on的一個參數(shù) childSelector （可選）來實現(xiàn)
這樣[圖片上傳中...(xx.gif-903844-1602815882681-0)]
點擊新增的btnAdd按鈕后也可以觸發(fā)事件
為.btn添加 mousemove ， mouseleave ， mousedown 事件，所有事件的事件名為 doTest 。觸發(fā) mousedown 事件時，取消.btn所有名為doTest綁定事件（利用 unbind(".doTest") ）。
網(wǎng)頁標(biāo)題：jquery事件綁定on,jq的綁定事件
標(biāo)題鏈接：http://fisionsoft.com.cn/article/dssheos.html
