jquery事件綁定解綁機制源碼解析
引子
為什么Jquery能實現(xiàn)不傳回調(diào)函數(shù)也能解綁事件?如下:
$("p").on("click",function(){
alert("The paragraph was clicked.");
});
$("#box1").off("click");
事件綁定解綁機制
調(diào)用on函數(shù)的時候,將生成一份事件數(shù)據(jù),結(jié)構(gòu)如下:
{
type: type,
origType: origType,
data: data,
handler: handler,
guid: guid,
selector: selector,
needsContext: needsContext,
namespace: namespace
}
并將該數(shù)據(jù)加入到元素的緩存中。jquery中每個元素都可以有一個緩存(只有有需要的時候才生成),其實就是該元素的一個屬性。jquery為每個元素的每種事件都建立一個隊列,用來保存事件處理函數(shù),所以可以對一個元素添加多個事件處理函數(shù)。緩存的結(jié)構(gòu)如下:
"div#box":{ //元素
"Jquery623873":{ //元素的緩存
"events":{
"click":[
{ //元素click事件的事件數(shù)據(jù)
type: type,
origType: origType,
data: data,
handler: handler,
guid: guid,
selector: selector,
needsContext: needsContext,
namespace: namespace
}
],
"mousemove":[
{
type: type,
origType: origType,
data: data,
handler: handler,
guid: guid,
selector: selector,
needsContext: needsContext,
namespace: namespace
}
]
}
}
}
當(dāng)要解綁事件的時候,如果沒指定fn參數(shù),jquery就會從該元素的緩存里拿到要解綁的事件的處理函數(shù)隊列,從里面拿出fn參數(shù),然后調(diào)用removeEventListener進行解綁。
源代碼
代碼注釋可能不太清楚,可以復(fù)制出來看
jquery原型中的on,one,off方法:
事件綁定從這里開始
jQuery.fn.extend( {
on: function( types, selector, data, fn ) {
return on( this, types, selector, data, fn );
},
one: function( types, selector, data, fn ) {
return on( this, types, selector, data, fn, 1 );
},
off: function( types, selector, fn ) {
//此處省略處理參數(shù)的代碼
return this.each( function() {
jQuery.event.remove( this, types, fn, selector );
} );
}
} );
獨立出來供one和on調(diào)用的on函數(shù):
function on( elem, types, selector, data, fn, one ) {
var origFn, type;
//此處省略處理參數(shù)的代碼
//是否是通過one綁定,是的話使用一個函數(shù)代理當(dāng)前事件回調(diào)函數(shù),代理函數(shù)只執(zhí)行一次
//這里使用到了代理模式
if ( one === 1 ) {
origFn = fn;
fn = function( event ) {
// Can use an empty set, since event contains the info
jQuery().off( event );
return origFn.apply( this, arguments );
};
// Use same guid so caller can remove using origFn
fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
}
/************************************************
*** jquery將所有選擇到的元素到放到一個數(shù)組里,然后
*** 對每個元素到使用event對象的add方法綁定事件
*************************************************/
return elem.each( function() {
jQuery.event.add( this, types, fn, data, selector );
} );
}
處理參數(shù)的代碼也可以看一下,實現(xiàn)on("click",function(){})這樣調(diào)用 on:function(types, selector, data, fn)也不會出錯。其實就是內(nèi)部判斷,如果data, fn參數(shù)為空的時候,把selector賦給fn
event對象是事件綁定的一個關(guān)鍵對象:
這里處理把事件綁定到元素和把事件信息添加到元素緩存的工作:
jQuery.event = {
add: function( elem, types, handler, data, selector ) {
var handleObjIn, eventHandle, tmp,
events, t, handleObj,
special, handlers, type, namespaces, origType,
elemData = dataPriv.get( elem ); //這句將檢查elem是否被緩存,如果沒有將會創(chuàng)建一個緩存添加到elem元素上。形式諸如:elem["jQuery310057655476080253721"] = {}
// Don't attach events to noData or text/comment nodes (but allow plain objects)
if ( !elemData ) {
return;
}
//用戶可以傳入一個自定義數(shù)據(jù)對象來代替事件回調(diào)函數(shù),將事件回調(diào)函數(shù)放在這個數(shù)據(jù)對象的handler屬性里
if ( handler.handler ) {
handleObjIn = handler;
handler = handleObjIn.handler;
selector = handleObjIn.selector;
}
//每個事件回調(diào)函數(shù)都會生成一個唯一的id,以后find/remove的時候會用到
if ( !handler.guid ) {
handler.guid = jQuery.guid++;
}
// 如果元素第一次綁定事件,則初始化元素的事件數(shù)據(jù)結(jié)構(gòu)和主回調(diào)函數(shù)(main)
//說明:每個元素有一個主回調(diào)函數(shù),作為綁定多個事件到該元素時的回調(diào)的入口
if ( !( events = elemData.events ) ) {
events = elemData.events = {};
}
//這里就是初始化主回調(diào)函數(shù)的代碼
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 !== "undefined" && jQuery.event.triggered !== e.type ?
jQuery.event.dispatch.apply( elem, arguments ) : undefined;
};
}
// 處理事件綁定,考慮到可能會通過空格分隔傳入多個事件,這里要進行多事件處理
types = ( types || "" ).match( rnotwhite ) || [ "" ];
t = types.length;
while ( t-- ) {
tmp = rtypenamespace.exec( types[ t ] ) || [];
type = origType = tmp[ 1 ];
namespaces = ( tmp[ 2 ] || "" ).split( "." ).sort();
// There *must* be a type, no attaching namespace-only handlers
if ( !type ) {
continue;
}
// If event changes its type, use the special event handlers for the changed type
special = jQuery.event.special[ type ] || {};
// If selector defined, determine special event api type, otherwise given type
type = ( selector ? special.delegateType : special.bindType ) || type;
// Update special based on newly reset type
special = jQuery.event.special[ type ] || {};
// 事件回調(diào)函數(shù)的數(shù)據(jù)對象
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 );
// 加入第一次綁定該類事件,會初始化一個數(shù)組作為事件回調(diào)函數(shù)隊列,每個元素的每一種事件有一個隊列
if ( !( handlers = events[ type ] ) ) {
handlers = events[ type ] = [];
handlers.delegateCount = 0;
// Only use addEventListener if the special events handler returns false
if ( !special.setup ||
special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
if ( elem.addEventListener ) {
elem.addEventListener( type, eventHandle );
}
}
}
if ( special.add ) {
special.add.call( elem, handleObj );
if ( !handleObj.handler.guid ) {
handleObj.handler.guid = handler.guid;
}
}
// 加入到事件回調(diào)函數(shù)隊列
if ( selector ) {
handlers.splice( handlers.delegateCount++, 0, handleObj );
} else {
handlers.push( handleObj );
}
// Keep track of which events have ever been used, for event optimization
// 用來追蹤哪些事件從未被使用,用以優(yōu)化
jQuery.event.global[ type ] = true;
}
}
};
千萬注意,對象和數(shù)組傳的是引用!比如將事件數(shù)據(jù)保存到緩存的代碼:
handlers = events[ type ] = [];
if ( selector ) {
handlers.splice( handlers.delegateCount++, 0, handleObj );
} else {
handlers.push( handleObj );
}
handlers的改變,events[ type ]會同時改變。
dataPriv就是管理緩存的對象:
其工作就是給元素創(chuàng)建一個屬性,這個屬性是一個對象,然后把與這個元素相關(guān)的信息放到這個對象里面,緩存起來。這樣需要使用到這個對象的信息時,只要知道這個對象就可以拿到:
function Data() {
this.expando = jQuery.expando + Data.uid++;
}
Data.uid = 1;
//刪除部分沒用到代碼
Data.prototype = {
cache: function( owner ) {
// 取出緩存,可見緩存就是目標(biāo)對象的一個屬性
var value = owner[ this.expando ];
// 如果對象還沒有緩存,則創(chuàng)建一個
if ( !value ) {
value = {};
// We can accept data for non-element nodes in modern browsers,
// but we should not, see #8335.
// Always return an empty object.
if ( acceptData( owner ) ) {
// If it is a node unlikely to be stringify-ed or looped over
// use plain assignment
if ( owner.nodeType ) {
owner[ this.expando ] = value;
// Otherwise secure it in a non-enumerable property
// configurable must be true to allow the property to be
// deleted when data is removed
} else {
Object.defineProperty( owner, this.expando, {
value: value,
configurable: true
} );
}
}
}
return value;
},
get: function( owner, key ) {
return key === undefined ?
this.cache( owner ) :
// Always use camelCase key (gh-2257) 駝峰命名
owner[ this.expando ] && owner[ this.expando ][ jQuery.camelCase( key ) ];
},
remove: function( owner, key ) {
var i,
cache = owner[ this.expando ];
if ( cache === undefined ) {
return;
}
if ( key !== undefined ) {
// Support array or space separated string of keys
if ( jQuery.isArray( key ) ) {
// If key is an array of keys...
// We always set camelCase keys, so remove that.
key = key.map( jQuery.camelCase );
} else {
key = jQuery.camelCase( key );
// If a key with the spaces exists, use it.
// Otherwise, create an array by matching non-whitespace
key = key in cache ?
[ key ] :
( key.match( rnotwhite ) || [] );
}
i = key.length;
while ( i-- ) {
delete cache[ key[ i ] ];
}
}
// Remove the expando if there's no more data
if ( key === undefined || jQuery.isEmptyObject( cache ) ) {
// Support: Chrome <=35 - 45
// Webkit & Blink performance suffers when deleting properties
// from DOM nodes, so set to undefined instead
// https://bugs.chromium.org/p/chromium/issues/detail?id=378607 (bug restricted)
if ( owner.nodeType ) {
owner[ this.expando ] = undefined;
} else {
delete owner[ this.expando ];
}
}
},
hasData: function( owner ) {
var cache = owner[ this.expando ];
return cache !== undefined && !jQuery.isEmptyObject( cache );
}
};
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery?事件綁定及取消?bind?live?delegate?on?one區(qū)別解析
- jquery事件綁定方法介紹
- jQuery事件綁定和解綁、事件冒泡與阻止事件冒泡及彈出應(yīng)用示例
- jQuery實現(xiàn)的事件綁定功能基本示例
- jQuery的三種bind/One/Live/On事件綁定使用方法
- jQuery 全選 全不選 事件綁定的實現(xiàn)代碼
- jQuery事件綁定方法學(xué)習(xí)總結(jié)(推薦)
- jquery移除了live()、die(),新版事件綁定on()、off()的方法
- 關(guān)于Jquery中的事件綁定總結(jié)
- jQuery事件綁定用法詳解
- 深入理解jQuery事件綁定
- jQuery事件綁定on()與彈窗實現(xiàn)代碼
- jQuery事件綁定用法詳解(附bind和live的區(qū)別)
- jQuery實現(xiàn)按鈕只點擊一次后就取消點擊事件綁定的方法
- JQuery中DOM事件綁定用法詳解
- jQuery事件綁定on()、bind()與delegate() 方法詳解
- jQuery事件綁定與解除綁定實現(xiàn)方法
- jquery中click等事件綁定及移除的幾種方法小結(jié)
相關(guān)文章
基于jquery的獲取mouse坐標(biāo)插件的實現(xiàn)代碼
用jquery實現(xiàn)的獲取mouse坐標(biāo)的實現(xiàn)代碼,需要的朋友可以參考下。2010-04-04
JQuery判斷checkbox是否選中及其它復(fù)選框操作方法合集
這篇文章主要介紹了JQuery判斷checkbox是否選中及其它復(fù)選框操作方法合集,本文匯總了網(wǎng)上解決這個問題比較好的幾篇文章,需要的朋友可以參考下2015-06-06
基于jquery實現(xiàn)鼠標(biāo)左右拖動滑塊滑動附源碼下載
這篇文章主要介紹了基于jquery實現(xiàn)鼠標(biāo)左右拖動滑塊滑動附源碼下載 的相關(guān)資料,需要的朋友可以參考下2015-12-12
基于MVC5和Bootstrap的jQuery TreeView樹形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合
這篇文章主要介紹了基于MVC5和Bootstrap的jQuery TreeView樹形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合的相關(guān)資料,需要的朋友可以參考下2016-08-08
Jquery+ajax+JAVA(servlet)實現(xiàn)下拉菜單異步取值
這篇文章主要介紹了Jquery+ajax+JAVA(servlet)實現(xiàn)下拉菜單異步取值的相關(guān)資料,需要的朋友可以參考下2016-03-03

