标签：
addEventListener方法大家应该都很熟悉，它是Html元素注册事件最原始的方法。先看下addEventListener方法签名：
element.addEventListener(event, function, useCapture)
event:事件名，例如“click”，这里要提醒的一点是不要加前缀“on”;
function:事件触发时执行的函数;
userCapture:默认为false，表示event事件在冒泡阶段触发。如果设置为true，则事件将会在捕获阶段触发。如果不清楚什么是捕获和冒泡，请自觉了解事件的冒泡机制（友情链接：勤能补挫-简单But易错的JS&CSS问题总结）。
虽然addEventListener包含了三个参数，但一般我们都只使用了前两个参数，下面的代码只使用了两个参数：
document.getElementById("myBtn").addEventListener("click", function() {
alert(“我是在冒泡阶段触发的哦！”);
});
上面代码注册的函数会在冒泡阶段触发，如果想在捕获阶段触发,直接把第三个参数传递进去就ok了。在实现DOM元素拖拽功能时，会使用到捕获方式。
另外，IE8以及之前的版本不支持事件按捕获形式传播，并且注册方法也没有addEventListener函数，IE为事件注册提供了attachEvent方法。和addEventListener相似，也包含有event和function参数，但不包含第三个参数。
jQuery的事件函数通过jQuery.fn.extend附加到jQuery对象，jQuery.fn.extend包含了jQuery的所有事件注册函数。那么jQuery到底提供了哪些事件函数？这里把这些函数分层了三类：
（1）和事件同名的函数：jQuery几乎提供了所有DOM元素事件的同名函数，像我们经常使用的click、focus、scroll等函数。使用也很简单，例如我们要给div元素绑定click事件，可以直接写成$(“div”).click(function(){})。DOM元素的事件有很多，jQuery为每个事件都添加了同名的注册函数吗？看源码！
//循环遍历所有的dom元素事件名数组
jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
"change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {
//把dom元素所有事件通过fn[事件名]的方式添加到jquery对象
// Handle event binding
jQuery.fn[ name ] = function( data, fn ) {
//如果参数长度大于0，则调用on方法委托函数到name事件;如果参数长为0，则触发事件执行
return arguments.length > 0 ?
this.on( name, null, data, fn ) :
this.trigger( name );
};
});
首先看到的是一串包含了所有DOM元素事件的字符串，通过空格把字符串分隔成数组。如果传递的参数长度大于0，则调用jQuery对象的on方法注册事件。如果参数长度为0，则直接调用trigger方法触发事件。例如(“div”).click(function())将会调用on方法注册事件，而(“div”).click()则调用trigger方法，立即触发click事件。
上面的代码有几点需要作下解释：
jQuery.fn中的函数包含的上下文this是指向jQuery实体，例如$(“div”)实体。
jQuery.fn[name] = function(){}等效于jQuery.fn.name = function(){}，例如jQuery.fn[“click”] = function(){}等效于jQuery.fn.click = function(){}。
This.on和this.trigger方法这里暂不忙解释。
（2）绑定和委托函数：bind/unbind和delegate/undelegate方法通过jQuery.fn.extend附加到jQuery对象上。代码很简单：
jQuery.fn.extend({
//事件绑定
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
//事件解绑
unbind: function( types, fn ) {
return this.off( types, null, fn );
},
//事件委托
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
},
//委托解绑
undelegate: function( selector, types, fn ) {
return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
}
});
bind和delegate都是直接调用jQuery对象的on函数，唯一区别是传递的参数不同，bind的第二个参数为null，而委托的第二个参数是一个selector。别小看这个区别，使用jQuery绑定事件常出的问题部分原因就是没搞清楚这两个参数的区别。
（3）底层注册函数：前面介绍的和事件同名的函数、绑定和委托函数最终都是调用了jQuery对象的on函数，我们在编程的时候也可以直接使用on函数。on函数代码比较复杂，我们先看看外壳：
jQuery.fn.extend({
//比较底层的事件委托函数，其他函数都是调用这个来和元素建立绑定或者委托
on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
return this.each( function() {
jQuery.event.add( this, types, fn, data, selector );
});
},
//一次性事件绑定
one: function( types, selector, data, fn ) {
return this.on( types, selector, data, fn, 1 );
},
//比较底层的事件解绑，其他解绑函数都是调用该函数执行解绑
off: function( types, selector, fn ) {
return this.each(function() {
jQuery.event.remove( this, types, fn, selector );
});
},
//触发事件
trigger: function( type, data ) {
return this.each(function() {
jQuery.event.trigger( type, data, this );
});
},
//只执行元素绑定的处理函数，不会触发浏览器的默认动作
triggerHandler: function( type, data ) {
var elem = this[0];
if ( elem ) {
return jQuery.event.trigger( type, data, elem, true );
}
}
});
为什么说是底层的函数？因为前面的所有绑定最终都是调用on函数，所有的解绑最终调用off函数。这里还包含了trigger和triggerHandler函数，前一个是触发元素的所有type事件行为，而triggerHandler只触发绑定的函数而不触发行为。例如focus事件，triggerHandler只会触发绑定给元素的focus处理函数，而不会真的让元素获得焦点。但trigger函数会让元素获取焦点。
汇总一下，jQuery提供的事件处理函数不外乎也就下面这些。
这里为什么提出了委托和绑定？事出有因，我们慢慢来分析。之前介绍了几类事件绑定，先分下类便于后面的分析。以什么分类？就以调用on函数的第二个参数为不为null。
bind、blur、focus、focusin、focusout、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、 change、select、submit、keydown、keypress、keyup error、contextmenu。
delegate、on
接下来我们举一个场景：给div容器（class为parent）列表中的每一项(class为child)添加click事件，并且列表的项可动态添加。
<div class="parent"> <div class="child">第1个儿子</div> <div class="child">第2个儿子</div> <div class="child">第3个儿子</div> </div> <button id="btn">生儿子</button> <script type="text/javascript"> var i = 4; (".parent.child").click(function(){alert("我是你儿子"}); //(".parent.child").click(function(){alert("我是你儿子"}); //(".parent .child").bind("click", function(){ // alert("我是你儿子"); // }) ("#btn").click(function(){ $(".parent").append("<div class=‘child‘>第" + (i++) + "个儿子</div>"); }); </script>
页面加载后点击前三个儿子都会提示“我是你儿子”，现在我点击btn按钮，添加第四个儿子，然后再点击新增项看看。发现没有再弹出提示信息。上面代码注册事件使用的是click或者bind函数，效果都是一样：动态添加的子项没有触发事件了。其实，“为null的一类”事件效果都是这样。现在我们再把事件绑定改成delegate或者on函数：
//(".parent").on("click", ".child", function(){
// alert("我是你儿子");
// });
$(".parent").delegate(".child", "click", function(){
alert("我是你儿子");
});
测试结果发现，不管是on或者delegate，我们后面动态添加的子项都能触发事件。
通过上面的场景不难看出，click和bind函数只支持静态绑定，只能绑定给已经有的节点，后期动态生成的节点不支持。这样的行为我们可称为“绑定”。而通过delegate或者on方法通过传递一个selector，把通过selector筛选的元素的事件全权“委托”给父容器。所以事件其实是绑定在父容器上，只是在处理事件时jQuery内部做了委托处理。
那么，到底是委托好还是绑定好？个人建议如果筛选的元素比较少，可以使用click或者bind，比较简单并且代码也容易理解。但如果筛选出的元素可能包含成百上千，那么肯定使用delegate或者on，这样性能比bind高多了。delegate、on事件只会绑定给父容器，即使1000个节点，还是只绑定一次。而bind的话就得乖乖的绑定1000次。
不管是委托还是绑定，都是通过on注册。所以搞清楚on函数的实现也就搞清楚了jQuery的事件机制。
既然绑定和委托最终都是调用on函数，那么只要把on方法代码流程了解清楚，整个事件绑定机制也了解的差不多。On函数代码其实比较简单，包含参数处理和事件添加两个部分。函数包含了5个参数：
on: function( types, selector, data, fn, /*INTERNAL*/ one )
但是我们经常使用on函数并没有传递这么多参数，而是像这样：
(“a”).on(“click”,function());(“a”).on(“click”,function());(“a”).on(“click”, “p”, function(){}); (“a”).on(“click,mouseover,focus”,function());
(“a”).on(“click,mouseover,focus”,function());
(“”).on(“click”, {id: 1, name: “test”}, function{});
on函数大部分代码都是处理传入的参数，最后三行代码使用each遍历jQuery对象中的元素并调用jQuery.event.add方法。源代码如下：
<DIV class=cnblogs_code style="BORDER-TOP: #cccccc 1px solid; BORDER-RIGHT: #cccccc 1px solid; BORDER-BOTTOM: #cccccc 1px solid; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; PADDING-LEFT: 5px; BORDER-LEFT: #cccccc 1px solid; PADDING-RIGHT: 5px; BACKGROUND-COLOR: #f5f5f5"><PRE><SPAN style="COLOR: #000000">jQuery.fn.extend({ //比较底层的事件委托函数，其他函数都是调用这个来和元素建立绑定或者委托 on: function( types, selector, data, fn, /*INTERNAL*/ one ) { var origFn, type; //参数为types/handlers，("click", function) if ( typeof types === "object" ) { // ( types-Object, selector, data )。例如({‘click‘: function1,‘focus‘: function2}, selector, data) if ( typeof selector !== "string" ) { // ( types-Object, data )。例如({‘click‘: function1,‘focus‘: function2}, data) data = data || selector; selector = undefined; } //遍历{‘click‘: function1,‘focus‘: function2} for ( type in types ) { //每个type再单独调用on注册一次 this.on( type, selector, data, types[ type ], one ); } return this; } //只有两个参数，{types,fn} if ( data == null && fn == null ) { // ( types, fn ) fn = selector; data = selector = undefined; } //fn == null && data ！= null，只有三个参数的情况 else if ( fn == null ) { if ( typeof selector === "string" ) { // ( types, selector, fn )，例如：("click", "a,p", function(){}) fn = data; data = undefined; } else { // ( types, data, fn ), 例如：("click", {id: 1, name: "test"}, function(e){}) fn = data; data = selector; selector = undefined; } } if ( fn === false ) { //如果fn等于false，重新赋给fn一个return false的函数。 fn = returnFalse; } else if ( !fn ) { //如果fn未定义或者为null，不做任何操作，直接返回链式对象this return this; } if ( one === 1 ) { //事件只执行一次 origFn = fn; fn = function( event ) { //重写fn函数，在执行fn函数一次后，注销事件 // 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++ ); //赋值fn.guid等于原始函数origFn.guid } //jQuery对象包含的元素是一个集合，所以需要遍历每个元素执行event.add return this.each( function() { //event.add做了什么操作？ jQuery.event.add( this, types, fn, data, selector ); }); } }
jQuery.fn.on函数最后三行代码调用了jQuery.event.add函数，add是jQuery.event的一个函数。在了解add之前先看看jQuery.event，jQuery.event究竟包含哪些东西：
jQuery.event = { //函数，为元素添加事件 add: function( elem, types, handler, data, selector ) {}, //函数，为元素删除事件 remove: function( elem, types, handler, selector, mappedTypes ) {}, //函数，触发元素事件 trigger: function( event, data, elem, onlyHandlers ) {}, //函数，执行元素事件 dispatch: function( event ) {}, //函数，事件队列 handlers: function( event, handlers ) {}, //属性，KeyEvent和MouseEvent事件属性 props: "altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "), //函数，扩展event。添加一些附加属性，像target、type、origainEvent等属性 fix: function( event ) {}, //对象，特殊事件 special: {}, //函数，模拟事件行为，例如focus、unfocus行为 simulate: function( type, elem, event, bubble ) {} }
现在我们想要搞清楚的是jQuery怎样添加事件，以及如何执行事件。要了解清楚这些问题，就必须得搞清楚代码中的add、dispatch、handlers三个函数。
为了容易理解这些函数的关系，下面是一个函数执行顺序的流程图：
事件是建立在DOM元素之上，DOM元素和事件要建立关系，最原始的方法是在DOM元素上绑定事件。jQuery为了不破坏DOM树结构，通过缓存的方式保存事件。jQuery内部有一个叫做Data的缓存对象，通过key/value这种方式缓存数据。细心的同学在使用jQuery时会发现DOM元素多了一个以jQuery开头的属性，例如jQuery20303812802915245450.4513941336609537：3。这个属性正是jQuery缓存的key值。
Add函数中的elemData就是一个类型为Data的缓存对象，在调用get时需要把元素作为参数传递进去， 查找元素的属性以jQuery开始的元素句柄。例如elem[‘jQuery203038128.l..537’]这种形式。elemData需要关注另外两个属性:handle和events。
handler就是一个调用了dispatch的匿名函数，events是一个数组，每一项是一个handleObj对象，包含type、origType、data、handler、guid、selector等属性。如果传递的types为”click focus mouseenter”，那么events数组就包含了三个handleObj对象。
另外还得调用addEventListener给委托元素注册事件，不然事件触发不了。
总得来说，add函数干了几件事：
如果没有为委托元素elem建立缓存，在调用get时创建缓存；
赋予elemData.handle一个匿名函数，调用event.dispatch函数。
往elemData.events数组添加不同事件类型的事件对象handleObj。
给elem绑定一个types类型的事件，触发时调用elemData.handle。
add: function( elem, types, handler, data, selector ) { var handleObjIn, eventHandle, tmp, events, t, handleObj, special, handlers, type, namespaces, origType, elemData = data_priv.get( elem ); //存储事件句柄对象，elem元素的句柄对象 if ( !handler.guid ) { handler.guid = jQuery.guid++; //创建编号，为每一个事件句柄给一个标示 } if ( !(events = elemData.events) ) { events = elemData.events = {}; //events是jQuery内部维护的事件列队 } if ( !(eventHandle = elemData.handle) ) { //handle是实际绑定到elem中的事件处理函数 eventHandle = elemData.handle = function( e ) { jQuery.event.dispatch.apply( eventHandle.elem, arguments ); }; eventHandle.elem = elem; //事件可能是通过空格键分隔的字符串，所以将其变成字符串数组 types = ( types || "" ).match( core_rnotwhite ) || [""]; t = types.length; while ( t-- ) { // 这里把handleObj叫做事件处理对象,扩展一些来着handleObjIn的属性 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 ); // 初始化事件处理列队，如果是第一次使用，将执行语句 if ( !(handlers = events[ type ]) ) { handlers = events[ type ] = []; handlers.delegateCount = 0; if ( elem.addEventListener ) { elem.addEventListener( type, eventHandle, false ); } } // 将事件处理对象推入处理列表，姑且定义为事件处理对象包 if ( selector ) { handlers.splice( handlers.delegateCount++, 0, handleObj ); } else { handlers.push( handleObj ); } // 表示事件曾经使用过，用于事件优化 jQuery.event.global[ type ] = true; } // 设置为null避免IE中循环引用导致的内存泄露 elem = null; }
委托元素触发事件时会调用dispatch函数，dispatch函数需要做的就是执行我们添加的handler函数。
jQuery事件中的event和原生event是有区别的，做了扩展。所以代码中重新生成了一个可写的event：jQuery.event.fix(event)。包含的属性：
delegateTarget、currentTarget、handleObj、data、preventDefault、stopPropagation。
由于我们添加的事件函数之前保存到了缓存中，所以调用data_priv.get取出缓存。
代码生成了一个handlerQueue队列，这里先不忙介绍jQuery.event.handlers函数。handlerQueue是一个数组，每一项是一个格式为{ elem: cur, handlers: matches }的对象。cur是DOM元素，handlers是处理函数数组。
两个while循环：
第一个循环遍历handlerQueue，item为{ elem: cur, handlers: matches }。
第二个循环遍历handlers，分别执行每一个handler。
event做了封装，我们可以在事件函数中通过event.data获取额外的信息。
dispatch函数有判断处理函数的返回结果，如果返回结果等于false，阻止冒泡。调用preventDefault、stopPropagation终止后续事件的继续传递。
dispatch: function( event ) { //把event生成一个可写的对象 event = jQuery.event.fix( event ); var handlers = ( data_priv.get( this, "events" ) || {} )[ event.type ] || []; event.delegateTarget = this; handlerQueue = jQuery.event.handlers.call( this, event, handlers ); i = 0; while ( (matched = handlerQueue[ i++ ]) && !event.isPropagationStopped() ) { event.currentTarget = matched.elem; j = 0; while ( (handleObj = matched.handlers[ j++ ]) && !event.isImmediatePropagationStopped() ) { if ( !event.namespace_re || event.namespace_re.test( handleObj.namespace ) ) { event.handleObj = handleObj; event.data = handleObj.data; ret = handleObj.handler.apply( matched.elem, args ); if ( ret !== undefined ) { if ( (event.result = ret) === false ) { event.preventDefault(); event.stopPropagation(); } } } } } return event.result; }
dispatch函数有调用handler函数生成一个handler队列，其实整个事件流程中最能体现委托的地方就是handler函数。
这里有两个端点，cur = event.target（事件触发元素）和this（事件委托元素）。jQuery从cur通过parentNode 一层层往上遍历，通过selector匹配当前元素。
每一个cur元素都会遍历一次handlers。handlers的项是一个handleObj对象，包含selector属性。通过jQuery( sel, this ).index( cur )判断当前元素是否匹配，匹配成功就加到matches数组。
handlers遍历完后，如果matches数组有值，就把当前元素cur和matches作为一个对象附加到handlerQueue中。
一个委托元素可能包含委托和普通事件（直接绑定的事件），目前我们只根据delegateCount遍历了委托事件，所以最后还得通过handlers.slice( delegateCount )把后面的普通事件添加到队列中。
什么是委托事件和普通事件？
(“div”).on(“click”,“a,p”,function)这种形式添加的function是div的委托事件；而像(“div”).on(“click”, function)形式添加的事件就是div元素的一个普通事件。handlers数组中delegateCount之前的都是委托事件，之后的是普通事件。
handlers: function( event, handlers ) { var handlerQueue = [], delegateCount = handlers.delegateCount, cur = event.target; //向上遍历DOM元素 for ( ; cur !== this; cur = cur.parentNode || this ) { if ( cur.disabled !== true || event.type !== "click" ) { matches = []; for ( i = 0; i < delegateCount; i++ ) { handleObj = handlers[ i ]; //获取handler的selector sel = handleObj.selector + " "; if ( matches[ sel ] === undefined ) { matches[ sel ] = handleObj.needsContext ? //查看通过selector筛选的元素是否包含cur jQuery( sel, this ).index( cur ) >= 0 : jQuery.find( sel, this, null, [ cur ] ).length; } //如果元素匹配成功，则把handleObj添加到matches数组。 if ( matches[ sel ] ) { matches.push( handleObj ); } } //如果matches数组长度大于0，附加cur和matches到队列中 if ( matches.length ) { handlerQueue.push({ elem: cur, handlers: matches }); } } } if ( delegateCount < handlers.length ) { //表示还有为委托事件函数，也要附加到队列中 handlerQueue.push({ elem: this, handlers: handlers.slice( delegateCount ) }); } return handlerQueue; }
如果本篇内容对大家有帮助，请点击页面右下角的关注。如果觉得不好，也欢迎拍砖。你们的评价就是博主的动力！下篇内容，敬请期待！
标签：
原文地址：http://www.cnblogs.com/w-wanglei/p/5662067.html
