在线天堂中文最新版,最近中文字幕mv,中文有码无码人妻在线

5-6 on的綁定機(jī)制
收藏

on的綁定機(jī)制

我們通過 on 接口綁定一個(gè)事件的時(shí)候，內(nèi)部做了一些比較復(fù)雜的處理：

主要針對幾個(gè)設(shè)計(jì)問題的處理：

針對同一個(gè)對象的多個(gè)相同/不同的事件如何處理？
命名空間的處理？
自定義事件是如何觸發(fā)的？
全局事件如何出發(fā)？

具體很多問題我們在后續(xù)課程中會(huì)一個(gè)一個(gè)解決，我們先看看如果同一個(gè)元素綁定多個(gè)相同或者不同的事件要如何處理？

首先我們腦海中先要有一個(gè)分離的概念，jQuery 的事件與數(shù)據(jù)其實(shí)是沒有直接關(guān)聯(lián)的關(guān)系，而且通過數(shù)據(jù)緩存去存儲(chǔ)事件數(shù)據(jù)的。jQuery 從1.2.3版本引入數(shù)據(jù)緩存系統(tǒng)貫穿內(nèi)部，為整個(gè)服務(wù)事件體系也引入了這個(gè)緩存機(jī)制，所以 jQuery 并沒有將事件處理函數(shù)直接綁定到 DOM 元素上，而是通過 .data 存儲(chǔ)在緩存 .cahce 上，所以事件的機(jī)制都是依賴之前的數(shù)據(jù)緩存模塊的。

我們?yōu)榱死斫?jQuery.event.add 代碼結(jié)構(gòu)，適當(dāng)?shù)奶^這個(gè)環(huán)節(jié)中不能理解的代碼。

第一步：獲取數(shù)據(jù)緩存

//獲取數(shù)據(jù)緩存
elemData = data_priv.get( elem );

通過緩存對象的 get 方法獲取元素對應(yīng)的存儲(chǔ)數(shù)據(jù)，如果沒有則內(nèi)部會(huì)新建一個(gè)與 elem 元素映射的數(shù)據(jù)緩存區(qū)，用來存儲(chǔ)之后用戶將要要處理操作行為（事件與事件），這個(gè)處理主要是合并同個(gè)元素綁定多個(gè)事件的問題。

aaron.on('mousedown', 'li', function(e) {
  show('委托到li觸發(fā)')
})
aaron.on('mousedown', 'ul', function(e) {
  show('委托到ul觸發(fā)')
})
aaron.on('mousedown', 'div', function(e) {
  show('委托到div觸發(fā)')
})
aaron.on('mousedown', function(e) {
  show('mousedown')
})

如上同一個(gè)元素上綁定了 4 次不同的行為，但是都是針對同一個(gè)元素的所以這個(gè)地方我們就需要把事件與數(shù)據(jù)都合并到同一個(gè)緩存區(qū)，這樣每次重復(fù)操作都不會(huì)在去創(chuàng)建一個(gè)新的緩存了。

第二步：創(chuàng)建編號

if( !handler.guid ) {               
 handler.guid= jQuery.guid++;           
}

為每一個(gè)事件的句柄給一個(gè)標(biāo)示，添加 ID 的目的是用來尋找或者刪除 handler，因?yàn)檫@個(gè)東東是緩存在緩存對象上的，沒有直接跟元素節(jié)點(diǎn)發(fā)生關(guān)聯(lián)。

第三步：給緩存增加事件處理句柄

if ( !(events = elemData.events) ) {
    events = elemData.events= {};
}
if ( !(eventHandle = elemData.handle) ) {
    eventHandle = elemData.handle = function( e ) {
        return typeof jQuery !== core_strundefined && (!e || jQuery.event.triggered !== e.type) ?
            jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
            undefined;
    };
}

events，eventHandle 都是 elemData 緩存對象內(nèi)部的，可見在elemData中有兩個(gè)重要的屬性：

一個(gè)是 events，是jQuery內(nèi)部維護(hù)的事件列隊(duì)
一個(gè)是 handle，是實(shí)際綁定到elem中的事件處理函數(shù)

之后的代碼無非就是對這 2 個(gè)對象的篩選、分組、填充了。

第四步: 填充事件名與事件句柄

事件名稱可以添加指定的 event namespaces（命名空間）來簡化刪除或觸發(fā)事件。例如，"click.myPlugin.simple" 為 click 事件同時(shí)定義了兩個(gè)命名空間 myPlugin 和 simple。通過上述方法綁定的 click 事件處理，可以用 .off("click.myPlugin") 或 .off("click.simple") 刪除綁定到相應(yīng)元素的 Click 事件處理程序，而不會(huì)干擾其他綁定在該元素上的“click（點(diǎn)擊）” 事件。命名空間類似 CSS 類，因?yàn)樗鼈兪遣环謱哟蔚?只需要有一個(gè)名字相匹配即可。以下劃線開頭的名字空間是供 jQuery 使用的。所以要針對每個(gè)事件都需要綁定。

如：

.on('mouseup mousedown','p',function(e){
    console.log(e)
  })

其實(shí)就是填充events與eventHandle

elemData = ｛
       events:{}
       eventHandle:function(){}
｝
handlers = events[type] = [];
handlers.delegateCount = 0;

這段比較長了分解下，最終的目的就是為填充events，eventHandle。

其實(shí)整個(gè) add 方法下來就干了那么幾件事：

利用 data_priv 數(shù)據(jù)緩存，分離事件與數(shù)據(jù)
元素與緩存中建立 guid 的映射關(guān)系用于查找
通過 elemData.events 合并同一個(gè)元素上的多個(gè)事件
通過空格分隔的多事件
引用了鉤子處理特殊事件
如果委托元素，給對應(yīng)的數(shù)據(jù)打上一個(gè)記錄標(biāo)記
最后通過 addEventListener 綁定事件，等待執(zhí)行

所以我們可以看到在綁定的時(shí)候處理，都是為了后期做了大量的鋪墊。

任務(wù)

?不會(huì)了怎么辦

||

index.html

<!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <style> p { background:yellow; font-weight:bold; cursor:pointer; padding:5px; } p.over { background: #ccc; } span { color:red; } </style> <script src="http://yifanck.cn/static/lib/jquery/1.9.1/jquery.js" type="text/javascript"></script> </head> <body> <script> //////////////////// //事件on接口的內(nèi)部直接綁定方法 // //////////////////// add: function(elem, types, handler, data, selector) { var handleObjIn, eventHandle, tmp, events, t, handleObj, special, handlers, type, namespaces, origType, //事件緩存 elemData = data_priv.get(elem); // 檢測狀態(tài)，若為空數(shù)據(jù)、text或comment節(jié)點(diǎn)時(shí)，阻止綁定事件 if (!elemData) { return; } // 一般在第一運(yùn)行的時(shí)候，handler為事件處理函數(shù),后面jQuery對handler做了一些包裝 // 檢測handler是包含handler和selector的對象，包含說明handler是一個(gè)事件處理函數(shù)包 if (handler.handler) { handleObjIn = handler; handler = handleObjIn.handler; selector = handleObjIn.selector; } //檢測handler是否存在ID （guid），如果沒有那么傳給他一個(gè)ID //添加ID的目的是用來尋找或者刪除handler if (!handler.guid) { handler.guid = jQuery.guid++; } //給緩存增加事件處理空間 //elemData = { // events: // handle: //} //同一個(gè)元素，不同事件，不重復(fù)綁定 if (!(events = elemData.events)) { events = elemData.events = {}; } if (!(eventHandle = elemData.handle)) { eventHandle = elemData.handle = function(e) { // Discard the second event of a jQuery.event.trigger() and // when an event is called after a page has unloaded return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ? jQuery.event.dispatch.apply(elem, arguments) : undefined; }; } // Handle multiple events separated by a space // 通過空格分隔的多事件 types = (types || "").match(rnotwhite) || [""]; t = types.length; while (t--) { // 如"mouseover.a.b" → ["mouseover.a.b", "mouseover", "a.b"] tmp = rtypenamespace.exec(types[t]) || []; type = origType = tmp[1]; //取出事件命名空間，如a.b，并根據(jù)"."分隔成數(shù)組 namespaces = (tmp[2] || "").split(".").sort(); // There *must* be a type, no attaching namespace-only handlers //檢測狀態(tài)，若為空數(shù)據(jù)、text或comment節(jié)點(diǎn)時(shí)，阻止綁定事件 if (!type) { continue; } // If event changes its type, use the special event handlers for the changed type // 事件是否會(huì)改變當(dāng)前狀態(tài)，如果會(huì)則使用特殊事件 // click beforeunload blur special = jQuery.event.special[type] || {}; // If selector defined, determine special event api type, otherwise given type // 根據(jù)是否已定義selector，決定使用哪個(gè)特殊事件api，如果沒有非特殊事件，則用type // focus -> delegateType:focusin // blur -> delegateType:focusout type = (selector ? special.delegateType : special.bindType) || type; // Update special based on newly reset type special = jQuery.event.special[type] || {}; // handleObj is passed to all event handlers handleObj = jQuery.extend({ type: type, origType: origType, data: data, handler: handler, guid: handler.guid, selector: selector, needsContext: selector && jQuery.expr.match.needsContext.test(selector), namespace: namespaces.join(".") }, handleObjIn); // Init the event handler queue if we're the first if (!(handlers = events[type])) { handlers = events[type] = []; handlers.delegateCount = 0; // Only use addEventListener if the special events handler returns false // 如果獲取特殊事件監(jiān)聽方法失敗，則使用addEventListener進(jìn)行添加事件 if (!special.setup || special.setup.call(elem, data, namespaces, eventHandle) === false) { if (elem.addEventListener) { elem.addEventListener(type, eventHandle, false); } } } if (special.add) { special.add.call(elem, handleObj); if (!handleObj.handler.guid) { handleObj.handler.guid = handler.guid; } } // Add to the element's handler list, delegates in front //有委托元素，增加委托標(biāo)記 if (selector) { handlers.splice(handlers.delegateCount++, 0, handleObj); } else { handlers.push(handleObj); } // Keep track of which events have ever been used, for event optimization jQuery.event.global[type] = true; } } </script> </body> </html>

提問題

提交

其他問答

查看更多本節(jié)問答

寫筆記

公開筆記

提交

||

全屏

請驗(yàn)證，完成請求

由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求

打開微信掃碼自動(dòng)綁定

您還未綁定服務(wù)號

綁定后可得到

· 粉絲專屬優(yōu)惠福利
· 大咖直播交流干貨
· 課程更新,問題答復(fù)提醒
· 賬號支付安全提醒

使用 Ctrl+D 可將網(wǎng)站添加到書簽

最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

5-6 on的綁定機(jī)制

on的綁定機(jī)制

任務(wù)

提問題

其他問答

寫筆記

您還未綁定服務(wù)號

收藏課程后，能更快找到我哦～

手記推薦

最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

5-6 on的綁定機(jī)制

熱搜

最近搜索清空

on的綁定機(jī)制

任務(wù)

提問題

其他問答

寫筆記

您還未綁定服務(wù)號

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～