读jQuery源码之七(Event)

1.Event中最核心的方法有3个

 

其它外在的方法(on,off,one,delegate,bind.etc.)都是调用直接或间接调用(比如on调用了add,delegate调用了on)来完成,所以我也重点读这部分的代码,对于事件绑定推荐使用on或off方法。例如用on可以代替delegate,bind和unbind也不推荐再使用,底层仍然调用了on和off。

 

2.从on里面的使用入手看代码:jQuery内部对on里面的参数顺序做了兼容,所以我们在调用的时候不用顾虑参数顺序,只管传就对了。on里面的如下代码来实现兼容参数顺序:

 

2.1 jQuery中添加了一些事件的快捷使用方法,不用每次都用on,代码如下:

 

2.2 one:绑定事件只触发一次,也是调用on来完成,在on里面通过如下代码来实现:

 

2.3 trigger和triggerHandler区别:triggerHandler不会触发事件的默认行为,trigger会触发。它们的作用都是主动触发事件,特别是自定义事件需要通过trigger触发。

 

3. add方法

3.1 参数:

元素,事件类型,处理函数,传递参数,委托元素(选择器)

3.2 事件模块基于数据缓存模板,add方法主要拼装了存放在Data缓存里面的数据。通过代码查看:

在add源码最后加上:console.log(elemData);控制台输出如下:

展开click

具体看下mouseenter的情况:

3.3 支持一次绑定多个事件,例如$(“#div1”).on(‘click,mouseover,keydown’),源码实现部分:

 

3.4 原生事件在这里进行绑定添加

当然自定义的事件也绑定进去了,只是没什么作用而已,自定义事件需要手动触发。

 

3.5 jQuery.event.dispatch:主要作用事件分发处理,调用fix,handler,阻止事件冒泡

3.5.1 fix:对事件做兼容性处理,会调用一些Hooks兼容方法。例如mouseHooks中处理了pageX兼容性。jQuery里面的事件函数里面的参数ev是jQuery封装过的事件对象,不是原生的,获取原生的事件对象可以使用ev.originalEvent.这里有两个阻止冒泡的方法需要区分它们:

stopPropagation:阻止当前事件冒泡    stopImmediatePropagation:阻止当前事件冒泡,并且阻止监听当前事件的其它函数被触发

 

3.5.2 handler:返回了一个顺序的事件处理函数队列,里面进行了排序。

4.remove:移除事件绑定函数,最终调用了原生方法:removeEventListener

待续。。。

作者:张雪飞
出处:https://zhangxuefei.site/p/9
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注