首页 > 代码库 > Jquery 实现原理 :event源码结构
Jquery 实现原理 :event源码结构
1、 helper 对象 jQuery.event
jQuery.event 是一个helper对象,它是事件机制的真正实现,其他的api比如 on, click什么的都是对他的封装而已。基本结构如下:
jQuery.event = {
add: function(){}
remove: function(){}
trigger: function(){}
dispatch: function(){}
handlers: function(){}
fix: function(){}
special: function(){}
}
说说每个函数的作用:
add
在一个元素上注册一个事件,其实现过程在上面已经说过了,具体实现细节就不谈了。
remove
删除一个事件
trigger:触发事件,这里是触发浏览器原生的事件,注意其中有这么一行代码:elem[ type ]();
dispatch:事件分发,注意和trigger的区别,trigger是触发原生事件,而dispatch只是调用jquery注册的事件。如果你调用trigger,其会触发原生事件,然后原生事件会触发handle函数,handle函数会调用dispatch来调用你之前用jquery注册的其他回调函数。
handlers:返回用户注册的回调函数队列
fix:修正event参数
special:处理一些特殊的事件,比如onload
focus等等
2、jQuery.Event
这是回调函数中的event参数,这里做了标准化的处理,因此所有的浏览器中的event参数都会保持一致的api
3、封装api
因为有了 event和Event,下面就是封装了各种接口,最终都是调用event中的对应方法来实现的,后面依次定义了这些接口:on, one, off,
trigger。
4、别名:
在event.alias中定义了一堆别名,本质只是一个快捷方式而已,比如click其实就是on("click"),hover就是mouseenter和mouseleave
学习Web前端、java确实会遇到困难,有时候只需要别人点一下,自己就通了。这个微信号:858568103里有大咖、资料,在遇到难题时可以点拨一下大家。
Jquery 实现原理 :event源码结构