在項目開發(fā)中，經(jīng)常遇到綁定事件不起作用，或者事件綁定多次，導致重復觸發(fā)。

創(chuàng)新互聯(lián)是由多位在大型網(wǎng)絡公司、廣告設計公司的優(yōu)秀設計人員和策劃人員組成的一個具有豐富經(jīng)驗的團隊，其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設計師、平面廣告設計師、網(wǎng)絡營銷人員及形象策劃。承接：網(wǎng)站制作、網(wǎng)站建設、網(wǎng)站改版、網(wǎng)頁設計制作、網(wǎng)站建設與維護、網(wǎng)絡推廣、數(shù)據(jù)庫開發(fā),以高性價比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺等全方位的服務。

1.事件綁定的幾種常見方式（以click事件為例）

jquery:

　$(selector).click(function(){...})

　$(selector).bind("click",function(){...})

　$(selector).live("click",function(){...})

　$(document).delegate("selector","click",function(){...})

$(selector).on("click",function(){...})

　雖然有以上四種基本方式綁定，但無論你用哪一種，底層實現(xiàn)都是由on事件綁定完成，唯一的區(qū)別就是書寫方便和個人習慣而已。

　bind方法

　會給每一個符合selector的元素添加click執(zhí)行函數(shù)，即：將click事件綁定到所有設置了的selector元素上,如果動態(tài)添加了元素，之前綁定事件也起作用

live方法

　將事件綁定在document上，所有事件觸發(fā)冒泡到根節(jié)點document的時候，判斷是否為click事件、并且是否為selector元素都符合則執(zhí)行事件函數(shù)

delegate方法

　原理上delegate方法和live方法很類似，都是傳遞選擇器和執(zhí)行函數(shù)兩個參數(shù)到document上判斷，

$(document).delegate("selector","click",function(){...})

約等于

$("selector").live("click",function(){...})

[注意：live事件，jQuery 1.7以后版本使用on代替live，且移動設備safari瀏覽器不支持live事件]

【穿插解決方案：

移動設備safari瀏覽器不支持live事件

方法一：

首先要給綁定click事件的元素加上樣式：cursor: pointer;

然后再用live綁定事件

'selector').live('click', () {alert('你點我了'

如果方法一對你無效，你也可以用

方法二：

同樣也給綁定click事件的元素加上樣式：cursor: pointer;

然后用on來綁定事件，jquery1.7后推薦用on來動態(tài)綁定事件，因為比live更高效

$(document).on('click', 'selector', function() {
            alert('你點我了');        
});

】

唯一的區(qū)別在于delegate的性能會比live稍好一些，因為live方法需要遍歷整個dom去查selector而delegate只需要監(jiān)測document就夠了，想要更深入了解可以自己去網(wǎng)上查閱下。

on方法

　on的綁定原理和bind差不多，但是on在性能上占優(yōu)勢。

2.事件重復綁定的可能原因

  大量使用ajax

將所有事件寫在一個大方法里，如：

　var clickEvent = function(){

　　　$(a).bind(...);

　　　$(b).bind(...);

　}

　在大量使用ajax時，為了觸發(fā)事件會在success里調(diào)用clickEvent方法，然后由于其他地方需要觸發(fā)同樣的事件又會調(diào)用clickEvent，這樣很容易導致多次觸發(fā)。

解決方案：避免這樣使用

   嵌套元素的事件冒泡

　解決方案：

e.preventDefault()//阻止默認

      e.stoppropagation()//阻止冒泡

   頻繁使用trigger函數(shù)

　可能有時候的需求需要觸發(fā)某個特定事件，這時我們會想當然使用trigger觸發(fā)事件，但是卻沒有考慮到帶來的隱患。尤其是一個事件去trigger另一個事件

解決方案：阻止事件冒泡，見上，

  或者使用triggerhandler（慎用，不支持chrome貌似）

Javascript事件綁定的幾種方式

以button的Click事件為例：

<button id="btn">click me</button>function clickBtn() {

    alert('click!');

}

1、直接在元素上綁定回調(diào)函數(shù) <button id="btn" me</button>

2、JS獲取DOM元素對象后，對onclick屬性賦值，綁定事件：        document.getElementById('btn').onclick=clickBtn;

3、JS獲取DOM對象后，調(diào)用對象的addEventListener函數(shù)綁定事件：document.getElementById('btn').addEventListener('click',clickBtn);

現(xiàn)階段主流瀏覽器兼容的綁定事件方式就這3種

文章題目：事件綁定的幾種常見方式
當前網(wǎng)址：http://m.rwnh.cn/article8/jepcip.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供自適應網(wǎng)站、網(wǎng)頁設計公司、網(wǎng)站營銷、網(wǎng)站收錄、面包屑導航、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)