這篇文章給大家分享的是有關(guān)JavaScript動(dòng)態(tài)綁定的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
創(chuàng)新互聯(lián)是專(zhuān)業(yè)的達(dá)拉特網(wǎng)站建設(shè)公司,達(dá)拉特接單;提供網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行達(dá)拉特網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!
問(wèn)題描述:
假設(shè)我們的網(wǎng)頁(yè)中動(dòng)態(tài)生成了一個(gè)按鈕,在這個(gè)按鈕生成之前我們按照一般的事件綁定方法為此按鈕綁定了觸發(fā)事件,但是問(wèn)題是綁定的事件并沒(méi)有生效(JavaScript中為元素綁定的事件失效)
分析
1.首先我們來(lái)看一下這個(gè)按鈕是怎么回事:
問(wèn)題中按鈕有一個(gè)很關(guān)鍵的特性:動(dòng)態(tài)生成,也就是說(shuō)是在網(wǎng)頁(yè)加載完成之后執(zhí)行某些操作才產(chǎn)生的,它一開(kāi)始是不存在的;
2.然后我們來(lái)分析一下事件的綁定
對(duì)于動(dòng)態(tài)生成的元素,它不同于一般的網(wǎng)頁(yè)既有元素,它的事件綁定不能通過(guò)普通的事件綁定實(shí)現(xiàn)。
3.關(guān)于JavaScript事件綁定的小解(針對(duì)本題盜圖解析)
這里寫(xiě)圖片描述
由圖中我們可以看到事件冒泡即由最具體的元素(文檔嵌套最深節(jié)點(diǎn))接收,然后逐步上傳至document
事件捕獲會(huì)由最先接收到事件的元素然后傳向最里邊(我們可以將元素想象成一個(gè)盒子裝一個(gè)盒子,而不是一個(gè)積木堆積)
然后我們進(jìn)入dom事件流
DOM2級(jí)事件規(guī)定事件包括三個(gè)階段:
① 事件捕獲階段
② 處于目標(biāo)階段
③ 事件冒泡階段
我們分析一下第一階段就可以知道為什么了,js中一般事件綁定是在網(wǎng)頁(yè)生成的時(shí)候針對(duì)具體元素去綁定的,那么請(qǐng)問(wèn):網(wǎng)頁(yè)初始生成時(shí)按鈕存在嗎?答:NOP。這就是為什么事件沒(méi)有綁定上去,因?yàn)槎紱](méi)找到元素啊啊啊啊啊,綁個(gè)毛線(xiàn)
解決方法(jQuery on方法)
通過(guò)將事件綁定到存在的父元素上讓子元素的事件有效
jQuery on用法格式:
$(selector).on(event,childSelector,data,function,map)
示例,比如說(shuō)id為btn的元素為動(dòng)態(tài)生成,它的父元素為btnParent(必須是網(wǎng)頁(yè)加載時(shí)就有的元素,也可以直接綁定到body上去)那么我們可以這樣為它綁定處理事件
$("#btnParent").on("click","#btn",function(){ console.log('binded!'); });
如果想要更深層次的理解,那么請(qǐng)跟我一起閱讀一下jQuery.on()的源碼實(shí)現(xiàn)
on: function( types, selector, data, fn, /*INTERNAL*/ one ) { var type, origFn; // 類(lèi)型可以使類(lèi)型映射或者句柄映射 if ( typeof types === "object" ) { // ( types-Object, selector, data ) if ( typeof selector !== "string" ) { // ( types-Object, data ) data = data || selector; selector = undefined; } // 遍歷types對(duì)象,針對(duì)每一個(gè)屬性綁定on()方法 // 將types[type]作為fn傳入 for ( type in types ) { this.on( type, selector, data, types[ type ], one ); } return this; } // 參數(shù)修正 // jQuery這種參數(shù)修正的方法很好 // 可以兼容多種參數(shù)形式 // 可見(jiàn)在靈活調(diào)用的背后做了很多處理 if ( data == null && fn == null ) { // ( types, fn ) fn = selector; data = selector = undefined; } else if ( fn == null ) { if ( typeof selector === "string" ) { // ( types, selector, fn ) fn = data; data = undefined; } else { // ( types, data, fn ) fn = data; data = selector; selector = undefined; } } if ( fn === false ) { // fn傳入false時(shí),阻止該事件的默認(rèn)行為 // function returnFalse() {return false;} fn = returnFalse; } else if ( !fn ) { return this; } // one()調(diào)用on() if ( one === 1 ) { origFn = fn; fn = function( event ) { // Can use an empty set, since event contains the info // 用一個(gè)空jQuery對(duì)象,這樣可以使用.off方法, // 并且event帶有remove事件需要的信息 jQuery().off( event ); return origFn.apply( this, arguments ); }; // Use same guid so caller can remove using origFn // 事件刪除依賴(lài)于guid fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ ); } // 這里調(diào)用jQuery的each方法遍歷調(diào)用on()方法的jQuery對(duì)象 // 如$('li').on(...)則遍歷每一個(gè)li傳入add() // 推薦使用$(document).on()或者集合元素的父元素 return this.each( function() { jQuery.event.add( this, types, fn, data, selector ); }); },
關(guān)于jQuery還有很多其他的事件綁定方法,當(dāng)然不一定適用,也提一下
.bind(), .live(), .delegate()
但是說(shuō)到底.bind(), .live(), .delegate()都是通過(guò).on()來(lái)實(shí)現(xiàn)的,.unbind(), .die(), .undelegate(),也是一樣的都是通過(guò).off()來(lái)實(shí)現(xiàn)的
我們看一下jQuery的.bind(), .live(), .delegate()的實(shí)現(xiàn)源碼就清楚了
jQuery.fn.extend( { bind: function( types, data, fn ) { return this.on( types, null, data, fn ); //注意this.on() }, unbind: function( types, fn ) { return this.off( types, null, fn ); //注意this.off() }, delegate: function( selector, types, data, fn ) { return this.on( types, selector, data, fn ); }, undelegate: function( selector, types, fn ) { return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn ); } } );
感謝各位的閱讀!關(guān)于“JavaScript動(dòng)態(tài)綁定的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
網(wǎng)頁(yè)名稱(chēng):JavaScript動(dòng)態(tài)綁定的示例分析
分享URL:http://bm7419.com/article36/iiodsg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站維護(hù)、網(wǎng)站內(nèi)鏈、App開(kāi)發(fā)、商城網(wǎng)站、網(wǎng)站策劃、企業(yè)網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
網(wǎng)頁(yè)設(shè)計(jì)公司知識(shí)