jQuery 1.9.1源码分析系列（十）事件系统之主动触发事件和模拟冒泡处理(jquery源码是什么水平)

编辑：rootadmin

推荐整理分享jQuery 1.9.1源码分析系列（十）事件系统之主动触发事件和模拟冒泡处理(jquery源码是什么水平)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery源码是什么水平,jquery源码是什么水平,jquery animate源码,jquery.min.js源代码,jquery源码实现原理,jquery源码实现原理,jquery源码是什么水平,jquery源码实现原理,内容如对您有帮助，希望把文章链接给更多的朋友！

发现一个小点，先前没有注意的

　　jQuery重载stopPropagation函数调用的本地事件对象的stopPropagation函数阻止冒泡。也就是说，阻止冒泡的是当前节点，而不是事件源。

　　说到触发事件，我们第一反应是使用$(...).click()这种方式触发click事件。这种方式毫无疑问简洁明了，如果能使用这种方式推荐使用这种方式。但是如果是自定义事件呢？比如定义一个$(document).on("chuaClick","#middle",fn);这种情况怎么触发事件？这就要用到$("#middle").trigger("chuaClick")了。

a.触发事件低级API——jQuery.event.trigger

　　trigger函数对所有类型事件的触发提供了支持。这些事件主要分为两类：普通浏览器事件(包含带有命名空间的事件如"click.chua")、自定义事件。因为要统一处理，所以函数内部实现没有调用.click()这种方式来对普通浏览器事件做捷径处理，而是统一流程。处理过程如下

　　1.获取要触发的事件（传入的event可能是事件类型而不是事件对象）

　　2.修正浏览器事件(主要有修正事件源）和组合正确的事件处理参数data

　　后面这段组合事件处理参数列表data在后面处理时调用

　　3.判断是否是特殊节点对象的的特殊事件，是的话特殊处理

　　这里面需要特殊处理的事件比较少，这里列一下

　　4.从事件源开始遍历父节点直到Window对象，将经过的节点保存（保存到eventPath）下来备用

　　5.循环先前保存的节点，访问节点缓存，如果有对应的事件类型处理队列则取出其绑定的事件（入口函数）进行调用。　　　　　　

　　6. 最后处理浏览器默认事件，比如submit标签的提交表单处理。

　　注意：普通事件加上命名空间仍然属于普通事件，普通调用方式依然其作用。比如$(document).on('click.chua',"#id",fn1).on("click","#id",fn2)；当点击“#id”节点的时候fn1依然会被调用。触发指定命名空间事件的唯一方式是trigger：$("#id").trigger("click.chua"),此时只会调用fn1。

　　从第4、5个步骤可以看到trigger的另外一个巨大作用——模拟冒泡处理。后面会分析到

b. 事件特殊处理jQuery.event.special（主要有事件替代、模拟冒泡）详解

　　委托设计是基于事件可冒泡的。但是有些事件是不可冒泡的，有的事件在不同的浏览器上支持的冒泡情况不同。还有不同的浏览器支持的事件类型也不尽相同。这些处理主要都被放在jQuery.event.special中。jQuery.event.special对象中保存着为适配特定事件所需的变量和方法。

　　具体有:

delegateType / bindType （用于事件类型的调整）setup （在某一种事件第一次绑定时调用）add （在事件绑定时调用）remove （在解除事件绑定时调用）teardown （在所有事件绑定都被解除时调用）trigger （在内部trigger事件的时候调用）noBubble_defaulthandle （在实际触发事件时调用）preDispatch （在实际触发事件前调用）postDispatch （在实际触发事件后调用）

　　看一下模拟冒泡的函数simulate

　　看到没有，真正模拟冒泡函数是jQuery.event.trigger函数

special第一组

　　这里面涉及到冒泡处理的问题。

　　focus/blur本来是不冒泡的，但是我们依然可以通过$(document).on('focus ','#left',fn)来绑定，是怎么做到的？我们来看jQuery的处理

　　第一步，将focus绑定的事件转化为focusin来绑定，focusin在W3C的标准中是冒泡的，除开火狐之外的浏览器也确实支持冒泡（火狐浏览器focusin/focusout支持冒泡的兼容后面会详解）

type = ( selector &#; special.delegateType : special.bindType ) || type;

　　然后，根据新得到的type类型（focusin）获取新的special

special = jQuery.event.special[ type ] || {};　　

jQuery 1.9.1源码分析系列（十）事件系统之主动触发事件和模拟冒泡处理(jquery源码是什么水平)

获取的special结果为

　　再然后，就是绑定事件，绑定事件实际上就对focusin、focusout做了兼容处理，源码中第一个判断有special.setup.call（…）这段代码，根据上面setup函数可见第一次进入的时候实际上是通过setup函数中的document.addEventListener( orig, handler, true )绑定事件，注意：第一个参数是是orig,因为火狐不支持focusin/focusout所以jQuery使用focus/blur替代来监听事件；注意第三个参数是true，表示在事件捕获阶段触发事件。

　　我们知道任何浏览器捕获都是从外层到精确的节点的，所有的focusin事件都会被捕获到，然后执行handler函数（里面是jQuery.event.simulate函数，源码略）。其他事件绑定则进入if分支将事件直接绑定到elem上

special第二组：mouseenter/mouseleave

　　需要注意的是只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave这样的话，mouseenter子元素不会反复触发事件，否则在IE中经常有闪烁情况发生

　　使用mouseover/out和事件时机检测创建mouseenter/leave事件有个关键的判断

　　其中!jQuery.contains( target, related )表示related在target外面。我们使用图例来解释

　　我们假设处理的是mouseenter事件，进入target。

　　鼠标从related到target，很明显related在target外面，所以当鼠标移动到target的时候满足条件，调用处理。

　　现在反过来，很明显related在target里面，那么鼠标之前就处于mouseenter状态（意味着之前就进行了mouseenter处理器处理），避免重复调用当然是不进行任何处理直接返回了。

　　我们假设处理的是mouseleave事件，离开target。

　　鼠标从target到related，很明显related在target里面，所以当鼠标移动到related的时候依然么有离开target，不做处理。

　　鼠标从target到related，很明显related在target外面，所以当鼠标移动到related的时候已经离开了target的范围，做处理。

special第三组：submit和change