jQuery->DOM事件冒泡和事件代理

jQuery->DOM事件冒泡和事件代理

有关jQuery 事件模块结构部分的分析可以参考这篇文章，作者分析的很不错，赞一个。

进题之前，明确几个名词 EventTarget，EventListener，Event，文章中会用到

var t = document.getElementsByTagName('div')[0],    fn =   function( e ){      console.log( e.type) ;     };t.addEventListener('click' , fn , false);

一句话解释上面代码就是：EventTarget t注册了一个EventType为click的事件监听EventListener fn，事件监听函数fn有一个Event类型的参数e

下面的代码有写过没？jquery事件绑定相关的核心API，代码中蕴含了一种设计逻辑：对于from表单的submit事件，委托给body元素，由fn监听函数去处理，这种设计模式称为事件代理。不清楚下面代码逻辑的，可以参考这里 delegate，live，on，三者之间的区别可以看这篇文章

$("body").delegate( "form", "submit" , fn )$("body").live( "submit" , fn )$("body").on( "submit" , "form", fn )

一.什么是事件代理？

举个例子：假设元素E的上级元素F监听了click事件，处理函数为fn，元素E并没有监听click事件，鼠标点击了元素E，由于事件冒泡原理，fn会因为E的click操作而被执行，这

一过程描述的就是F代理了E的click事件

如下图：

要想这一过程有意义，EventListener fn需要具备一个能力：在fn中能够访问到触发事件的元素E，为什么？因为大多情况下需要改变的是触发事件的元素的属性，而不是事件代理本身。

要访问EventTarget E，可以这样做:

e = e || window.eventtarget = e.target || e.srcElement

二.事件代理带来了什么好处

看下图，

E1 , E2…En是F的子元素，假设子元素触发的事件都是相同的，按照逐一绑定事件的做发，代码就是下面的样子,不够优雅不够节约

E1.bind( 'eventType' , eventListioner );E2.bind( 'eventType' , eventListioner );......En.bind( 'eventType' , eventListioner );

有了事件代理，注册事件的代码就变成这样子了

F.delegate( 'eventType' , eventListioner );function eventListioner ( e ){   if(e.target.tagName == E){    ....   }}

还没完，前面的一丢丢都是在假设事件是可以冒泡的前提下，是否存在不冒泡的事件呢？如果存在，那代理模型应用在DOM事件模型上无疑存在缺陷，不好意思，input元素的focus事件默认是不冒泡的，为什么呢？ppk前辈也没找到根源，但是与对其他元素影响较小不无关系。其他不冒泡的事件可以参考这里

三.模拟事件冒泡

既然存在不冒泡的事件，为了确保浏览器之间的兼容，就需要为不冒泡的事件添加冒泡特性

冒泡的本质是什么？一句话描述冒泡的过程就是：事件源（EventTarget）A触发一事件E，浏览器会检查EventTarget A是否有注册对应的事件处理函数，如果有对应的处理函数，则调用，否则，事件传递到父节点AF上，然后重复前一过程直至事件传递到Window对象终止。其本质就是事件在DOM元素上自下而上的传递事件，执行事件监听的过程。

清楚了原理，模拟事件冒泡的算法也就有了（simulate_bubble_algo）：算法以事件触发者为起点，以window对象为终点，在DOM层级树上做遍历，判断DOM元素是否有注册对应EventType的事件监听。

jQuery中让input元素的focus事件冒泡做法：jQuery 利用了浏览器之间对事件支持的不同，对于IE，jQuery直接使用IE中已经支持冒泡的事件focusin,对于用户想要注册绑定的focus事件，直接将其绑定到focusin事件上实现事件冒泡；对于非IE浏览器，jQuery在focus事件捕获阶段为document绑定监听函数，该函数实现simulate_bubble_algo算法，对DOM树的遍历，逐一触发满足条件的元素的事件监听函数。

还没完，IE<9中form元素的submit事件也是不冒泡的，与focus事件相比，为IE添加冒泡的submit事件似乎更为紧迫。

为了描述jQuery中的实现方案，先要解释一些问题：

1. 理解事件的默认行为

HTML中type为submit的两类元素input和button，与其他类型非submit的元素相比较，他们多的是有一个submit form表单的默认行为

<input id="asubmitInput" type="submit" /> <button id="asubmitButton" type="submit" />

2. 理解 event.PReventDefault()的作用（IE中对应是event.returnValue）, Event对象的该方法/属性用于阻止浏览器执行事件的默认行为。

OK，jQuery如何实现submit事件的冒泡呢

想象一下button提交表单的过程（submit_event_flow）：

1. 鼠标点击类型为submit的button，触发click事件

2. 如果button有对应的click事件监听，则执行监听函数，否则click事件冒泡到上级元素

3. 2 中click事件监听函数执行完毕返回，若返回值为非false，click事件冒泡到上级元素，否则click事件冒泡终止，表单提交动作不执行（默认行为不执行）

4. 事件冒泡到上级元素，重复过程 2, 3，直至遍历到window对象或者中途监听函数返回false中止。

5. 事件冒泡到顶层元素window，如返回值不为false，则执行默认行为，对应为触发form表单的submit事件

6. 由于submit事件在IE中不冒泡，所以至此form的submit操作结束。

验证这一过程可以使用下面的脚本

$(function(){        var elem = document.getElementsByTagName("input")[0];        var aform = document.getElementsByTagName("form")[0];                        if(elem.addEventListener){                                aform.addEventListener("submit" , function(){                console.log("form submit fired");            });                        window.addEventListener("click" , function(){                console.log("window click fn fired");            });                                    document.addEventListener("click" , function(){                console.log("document click fn fired");            });            document.documentElement.addEventListener("click" , function(){