在項(xiàng)目開發(fā)中,經(jīng)常遇到綁定事件不起作用,或者事件綁定多次,導(dǎo)致重復(fù)觸發(fā)。
創(chuàng)新互聯(lián)是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計(jì)公司的優(yōu)秀設(shè)計(jì)人員和策劃人員組成的一個(gè)具有豐富經(jīng)驗(yàn)的團(tuán)隊(duì),其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設(shè)計(jì)師、平面廣告設(shè)計(jì)師、網(wǎng)絡(luò)營(yíng)銷人員及形象策劃。承接:網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)頁設(shè)計(jì)制作、網(wǎng)站建設(shè)與維護(hù)、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫(kù)開發(fā),以高性價(jià)比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺(tái)等全方位的服務(wù)。
1.事件綁定的幾種常見方式(以click事件為例)
jquery:
$(selector).click(function(){...})
$(selector).bind("click",function(){...})
$(selector).live("click",function(){...})
$(document).delegate("selector","click",function(){...})
$(selector).on("click",function(){...})
雖然有以上四種基本方式綁定,但無論你用哪一種,底層實(shí)現(xiàn)都是由on事件綁定完成,唯一的區(qū)別就是書寫方便和個(gè)人習(xí)慣而已。
bind方法
會(huì)給每一個(gè)符合selector的元素添加click執(zhí)行函數(shù),即:將click事件綁定到所有設(shè)置了的selector元素上,如果動(dòng)態(tài)添加了元素,之前綁定事件也起作用
live方法
將事件綁定在document上,所有事件觸發(fā)冒泡到根節(jié)點(diǎn)document的時(shí)候,判斷是否為click事件、并且是否為selector元素都符合則執(zhí)行事件函數(shù)
delegate方法
原理上delegate方法和live方法很類似,都是傳遞選擇器和執(zhí)行函數(shù)兩個(gè)參數(shù)到document上判斷,
$(document).delegate("selector","click",function(){...})
約等于
$("selector").live("click",function(){...})
[注意:live事件,jQuery 1.7以后版本使用on代替live,且移動(dòng)設(shè)備safari瀏覽器不支持live事件]
【穿插解決方案:
移動(dòng)設(shè)備safari瀏覽器不支持live事件
方法一:
首先要給綁定click事件的元素加上樣式:cursor: pointer;
然后再用live綁定事件
'selector').live('click', () {alert('你點(diǎn)我了'
如果方法一對(duì)你無效,你也可以用
方法二:
同樣也給綁定click事件的元素加上樣式:cursor: pointer;
然后用on來綁定事件,jquery1.7后推薦用on來動(dòng)態(tài)綁定事件,因?yàn)楸萳ive更高效
$(document).on('click', 'selector', function() { alert('你點(diǎn)我了'); });
】
唯一的區(qū)別在于delegate的性能會(huì)比live稍好一些,因?yàn)閘ive方法需要遍歷整個(gè)dom去查selector而delegate只需要監(jiān)測(cè)document就夠了,想要更深入了解可以自己去網(wǎng)上查閱下。
on方法
on的綁定原理和bind差不多,但是on在性能上占優(yōu)勢(shì)。
2.事件重復(fù)綁定的可能原因
大量使用ajax
將所有事件寫在一個(gè)大方法里,如:
var clickEvent = function(){
$(a).bind(...);
$(b).bind(...);
}
在大量使用ajax時(shí),為了觸發(fā)事件會(huì)在success里調(diào)用clickEvent方法,然后由于其他地方需要觸發(fā)同樣的事件又會(huì)調(diào)用clickEvent,這樣很容易導(dǎo)致多次觸發(fā)。
解決方案:避免這樣使用
嵌套元素的事件冒泡
解決方案:
e.preventDefault()//阻止默認(rèn)
e.stoppropagation()//阻止冒泡
頻繁使用trigger函數(shù)
可能有時(shí)候的需求需要觸發(fā)某個(gè)特定事件,這時(shí)我們會(huì)想當(dāng)然使用trigger觸發(fā)事件,但是卻沒有考慮到帶來的隱患。尤其是一個(gè)事件去trigger另一個(gè)事件
解決方案:阻止事件冒泡,見上,
或者使用triggerhandler(慎用,不支持chrome貌似)
以button的Click事件為例:
function clickBtn() { alert('click!'); }
1、直接在元素上綁定回調(diào)函數(shù)
2、JS獲取DOM元素對(duì)象后,對(duì)onclick屬性賦值,綁定事件: document.getElementById('btn').onclick=clickBtn;
3、JS獲取DOM對(duì)象后,調(diào)用對(duì)象的addEventListener函數(shù)綁定事件:document.getElementById('btn').addEventListener('click',clickBtn);
現(xiàn)階段主流瀏覽器兼容的綁定事件方式就這3種