亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

章節
問答
課簽
筆記
評論
占位
占位

on的綁定機制

我們通過 on 接口綁定一個事件的時候,內部做了一些比較復雜的處理:

主要針對幾個設計問題的處理:

  1. 針對同一個對象的多個相同/不同的事件如何處理?
  2. 命名空間的處理?
  3. 自定義事件是如何觸發的?
  4. 全局事件如何出發?

具體很多問題我們在后續課程中會一個一個解決,我們先看看如果同一個元素綁定多個相同或者不同的事件要如何處理?

首先我們腦海中先要有一個分離的概念,jQuery 的事件與數據其實是沒有直接關聯的關系,而且通過數據緩存去存儲事件數據的。jQuery 從1.2.3版本引入數據緩存系統貫穿內部,為整個服務事件體系也引入了這個緩存機制,所以 jQuery 并沒有將事件處理函數直接綁定到 DOM 元素上,而是通過 .data 存儲在緩存 .cahce 上,所以事件的機制都是依賴之前的數據緩存模塊的。

我們為了理解 jQuery.event.add 代碼結構,適當的跳過這個環節中不能理解的代碼。

第一步:獲取數據緩存

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

通過緩存對象的 get 方法獲取元素對應的存儲數據,如果沒有則內部會新建一個與 elem 元素映射的數據緩存區,用來存儲之后用戶將要要處理操作行為(事件與事件),這個處理主要是合并同個元素綁定多個事件的問題。

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

如上同一個元素上綁定了 4 次不同的行為,但是都是針對同一個元素的所以這個地方我們就需要把事件與數據都合并到同一個緩存區,這樣每次重復操作都不會在去創建一個新的緩存了。

第二步:創建編號

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

為每一個事件的句柄給一個標示,添加 ID 的目的是用來尋找或者刪除 handler,因為這個東東是緩存在緩存對象上的,沒有直接跟元素節點發生關聯。

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

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 緩存對象內部的,可見在elemData中有兩個重要的屬性:

  1. 一個是 events,是jQuery內部維護的事件列隊
  2. 一個是 handle,是實際綁定到elem中的事件處理函數

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

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

事件名稱可以添加指定的 event namespaces(命名空間) 來簡化刪除或觸發事件。例如,"click.myPlugin.simple" 為 click 事件同時定義了兩個命名空間 myPlugin 和 simple。通過上述方法綁定的 click 事件處理,可以用 .off("click.myPlugin").off("click.simple") 刪除綁定到相應元素的 Click 事件處理程序,而不會干擾其他綁定在該元素上的“click(點擊)” 事件。命名空間類似 CSS 類,因為它們是不分層次的;只需要有一個名字相匹配即可。以下劃線開頭的名字空間是供 jQuery 使用的。所以要針對每個事件都需要綁定。

如:

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

其實就是填充events與eventHandle

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

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

其實整個 add 方法下來就干了那么幾件事:

  1. 利用 data_priv 數據緩存,分離事件與數據
  2. 元素與緩存中建立 guid 的映射關系用于查找
  3. 通過 elemData.events 合并同一個元素上的多個事件
  4. 通過空格分隔的多事件
  5. 引用了鉤子處理特殊事件
  6. 如果委托元素,給對應的數據打上一個記錄標記
  7. 最后通過 addEventListener 綁定事件,等待執行

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

任務

?不會了怎么辦
||

提問題

寫筆記

公開筆記
提交
||

請驗證,完成請求

由于請求次數過多,請先驗證,完成再次請求

加群二維碼

打開微信掃碼自動綁定

您還未綁定服務號

綁定后可得到

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

收藏課程后,能更快找到我哦~

使用 Ctrl+D 可將課程添加到書簽

邀請您關注公眾號
關注后,及時獲悉本課程動態

舉報

0/150
提交
取消
全部 精華 我要發布
全部 我要發布
最熱 最新
只看我的

手記推薦

更多

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?