jQuery源码阅读(八):事件-基础

Author : lovecicy

JavaScript是一种事件驱动型的语言,事件是JavaScript的基础,jQuery的事件无疑也是jQuery的核心之一。jQuery是强大的,jQuery源码是复杂的。一直觉得看jQuery源码是要勇气的,而要看事件处理的源码,更是需要勇气,都已经解读到这里了,就让我们硬着头皮上吧。jQuery中关于事件的代码有多少呢?从2650行一直到3669行,整整1000多行的代码,慢慢来吧。

这一篇,将不会涉及到太多源码的东西,更多的是对jQuery事件的一些基础介绍。关于事件,我之前写过一篇JavaScript事件的文章,里面简单介绍了JavaScript的事件基础知识,有兴趣的可以先看看这篇文章。而关于jQuery的事件处理方法的总结,也有之前的一篇文章——jQuery事件处理方法小记

关于事件基础,看完上面两篇,其实应该对事件的使用没什么问题了,但是这样以来,这篇文章的篇幅就……所以,让我们再来看看另一个话题吧:jQuery是如何处理事件的

我最熟悉的看代码方式就是,从我们平时用的接口入手,一步步剖析代码,这次也不例外,由于所有的事件绑定最终都是通过.on().off()两个方法来实现,所以,我们就从这两个方法入手。

大家不用急着去看这两个方法,从这两个方法入手,是为了引出$.event对象,这个对象不是对外公开的接口,而是作为内部的管理事件的工具类存在,真正绑定事件的过程是通过$.event.add()方法。

下面来大致地描述下jQuery处理事件的方法:

  1. $.event.add()方法中,将本次事件相关的属性,如事件类型、事件处理函数、数据等,组织成一个对象,放在jQuery的全局缓存$.cache中,HTML元素与$.cache中的数据通过一个uuid来对应。
  2. $.event.add()方法中,为元素绑定一个通用的事件处理函数,这个函数会调用jQuery的事件分发函数$.event.dispach()来处理事件。
  3. 当事件发生时,绑定的通用的事件处理函数会被调用,在这个函数中,调用$.event.dispach()
  4. $.event.dispach()中,对浏览器原生的事件对象进行处理,生成一个jQuery事件对象$.Event的实例;然后调用$.cache中的事件处理函数,并传入处理过的事件对象,分发事件完成。

好吧,就这样了,短小精悍有没有,具体的代码分析,且待下回分解吧。

standard

Have your say