为什么Jquery能实现不传回调函数也能解绑事件？如下：
并将该数据加入到元素的缓存中。jquery中每个元素都可以有一个缓存（只有有需要的时候才生成），其实就是该元素的一个属性。jquery为每个元素的每种事件都建立一个队列，用来保存事件处理函数，所以可以对一个元素添加多个事件处理函数。缓存的结构如下：
<div class="jb51code">
<pre class="brush:js;">
"div#Box":{ //元素
"Jquery623873":{ //元素的缓存
"events":{
"click":[
{ //元素click事件的事件数据
type: type,namespace: namespace
}
],"mousemove":[
{
type: type,namespace: namespace
}
]
}
}
}
当要解绑事件的时候，如果没指定fn参数，jquery就会从该元素的缓存里拿到要解绑的事件的处理函数队列，从里面拿出fn参数,然后调用removeEventListener进行解绑。
代码注释可能不太清楚，可以复制出来看
jquery原型中的on,one,off方法：
事件绑定从这里开始
//此处省略处理参数的<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>
return this.each( function() {
jQuery.event.remove( this,selector );
} );}
} );
<div class="jb51code">
<pre class="brush:js;">
function on( elem,one ) {
var origFn,type;
//此处省略处理参数的代码
//是否是通过one绑定，是的话使用一个函数代理当前事件回调函数，代理函数只执行一次
//这里使用到了代理模式
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将所有选择到的元素到放到一个数组里，然后
对每个元素到使用event对象的add方法绑定事件
*****/
return elem.each( function() {
jQuery.event.add( this,selector );
} );
}
处理参数的代码也可以看一下，实现on("click",function(){})这样调用 on:function(types,fn)也不会出错。其实就是内部判断，如果data,fn参数为空的时候，把selector赋给fn
event对象是事件绑定的一个关键对象：
这里处理把事件绑定到元素和把事件信息添加到元素缓存的工作：
<div class="jb51code">
<pre class="brush:js;">
jQuery.event = {
add: function( elem,handler,selector ) {
var handleObjIn,eventHandle,tmp,events,t,handleObj,special,handlers,type,namespaces,origType,elemData = dataPriv.get( elem ); //这句将检查elem是否被缓存，如果没有将会创建一个缓存<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>到elem元素上。形式诸如：elem["jQuery310057655476080253721"] = {}
// Don't attach events to noData or text/comment nodes (but allow plain objects)
if ( !elemData ) {
return;
}
//<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>可以传入一个<a href="https://www.jb51.cc/tag/zidingyi/" target="_blank" class="keywords">自定义</a>数据对象来代替事件回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>，将事件回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>放在这个数据对象的handler<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>里
if ( handler.handler ) {
handleObjIn = handler;
handler = handleObjIn.handler;
selector = handleObjIn.selector;
}
//每个事件回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>都会<a href="https://www.jb51.cc/tag/shengcheng/" target="_blank" class="keywords">生成</a>一个唯一的id，以后find/remove的时候会用到
if ( !handler.guid ) {
handler.guid = jQuery.guid++;
}
// 如果元素第一次绑定事件，则初始化元素的事件数据结构和主回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>（main）
//说明：每个元素有一个主回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>，作为绑定多个事件到该元素时的回调的入口
if ( !( events = elemData.events ) ) {
events = elemData.events = {};
}
//这里就是初始化主回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>的<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>
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 ] || {};
// 事件回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>的数据对象
handleObj = jQuery.extend( {
type: type,guid: handler.guid,needsContext: selector && jQuery.expr.match.needsContext.test( selector ),namespace: namespaces.join( "." )
},handleObjIn );
// 加入第一次绑定该类事件，会初始化一个数组作为事件回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>队列，每个元素的每一种事件有一个队列
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,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;
}
}
// 加入到事件回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>队列
if ( selector ) {
handlers.splice( handlers.delegateCount++,handleObj );
} else {
handlers.push( handleObj );
}
// Keep track of which events have ever been used,for event optimization
// 用来追踪哪些事件从未被使用，用以优化
jQuery.event.global[ type ] = true;
}}
};
千万注意，对象和数组传的是引用！比如将事件数据保存到缓存的代码：
handlers的改变，events[ type ]会同时改变。
其工作就是给元素创建一个属性，这个属性是一个对象，然后把与这个元素相关的信息放到这个对象里面，缓存起来。这样需要使用到这个对象的信息时，只要知道这个对象就可以拿到：
//删除部分没用到代码
Data.prototype = {
cache: function( owner ) {
// 取出缓存，可见缓存就是目标对象的一个<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>
var value = owner[ this.expando ];
// 如果对象还没有缓存，则创建一个
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 );
}
};
