引子

為什么Jquery能實現(xiàn)不傳回調(diào)函數(shù)也能解綁事件？如下：

$("p").on("click",function(){alert("The paragraph was clicked."); });$("#box1").off("click");

事件綁定解綁機(jī)制

調(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進(jìn)行解綁。

源代碼

代碼注釋可能不太清楚，可以復(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 infojQuery().off( event );return origFn.apply( this, arguments );};// Use same guid so caller can remove using origFnfn.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 unloadedreturn typeof jQuery !== "undefined" && jQuery.event.triggered !== e.type ?jQuery.event.dispatch.apply( elem, arguments ) : undefined;};}// 處理事件綁定，考慮到可能會通過空格分隔傳入多個事件，這里要進(jìn)行多事件處理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 handlersif ( !type ) {continue;}// If event changes its type, use the special event handlers for the changed typespecial = jQuery.event.special[ type ] || {};// If selector defined, determine special event api type, otherwise given typetype = ( selector ? special.delegateType : special.bindType ) || type;// Update special based on newly reset typespecial = 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 falseif ( !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() {//從這里可以看出expando 只在創(chuàng)建Data類的實例的時候初始化一次，即每個元素都以expando作為緩存的名稱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 assignmentif ( 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 keysif ( 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-whitespacekey = key in cache ?[ key ] :( key.match( rnotwhite ) || [] );}i = key.length;while ( i-- ) {delete cache[ key[ i ] ];}}// Remove the expando if there's no more dataif ( 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 );} };

總結(jié)

以上是生活随笔為你收集整理的jquery事件绑定解绑机制源码分析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。