向zepto.js学习如何手动触发DOM事件

原创 我的小苹果 随笔 Zepto源码分析 166阅读 2018-02-26 21:32:15 举报

前言

前端在最近几年实在火爆异常,vue、react、angular各路框架层出不穷,咱们要是不知道个双向数据绑定,不晓得啥是虚拟DOM,也许就被鄙视了。火热的背后往往也是无尽的浮躁,学习这些先进流行的类库或者框架可以让我们走的更快,但是静下心来回归基础,把基石打牢固,却可以让我们走的更稳,更远。

最近一直在看zepto的源码,希望通过学习它掌握一些框架设计的技巧,也将很久不再拾起的js基础重新温习巩固一遍。如果你对这个系列感兴趣,欢迎点击下方地址watch,随时关注动态。这篇文章主要想说一下zepto中事件模块(event.js)的trigger实现原理。

原文地址

仓库地址

event.js模块

zepto中由许多小的模块组合合成,基础的zepto.js模块,event.js事件处理模块,ajax.js请求处理模块等等。其中event.js事件处理模块的核心完成了zepto中事件绑定on,移除off还有手动触发trigger等功能。我们简单回顾下如何使用zepto的这三大功能。

哥们你逗我呢,jQuery,zepto多熟了,谁不会用这个啊!客观别急,我们今天主要是慢慢来看看它源码怎么实现的。

一步步看trigger怎么实现

直接上代码

直接贴出trigger函数的代码可能我们是懵逼的

$是啥啊!!!

$.fn是啥啊!!!

$.isPlainObject又是啥啊!!!

$.Event又是什么鬼?

仿佛有一连串的问题等待着我们解决。

为了直接切入不易理解,我们先来看看zepto中是如何给基础的zepto.js模块添加功能的

首先看看zepto.js模块

尽量删除了一些不必要的代码,可以看到我们平时使用的Zepto其实就是其匿名函数自执行内部导出的一个函数。而$.fn就是其原型

如何给zepto.js模块增添功能

zepto.js模块只有一些基础的功能,比如给dom添加事件的功能就没有,怎么添加呢?

最后缩减掉其他的干扰代码,可以看到所谓的给zepto.js模块增添功能,基本上就是在其原型上添加新的方法或者直接在$函数上定一些静态方法。

好啦我们已经解决了$,$.fn是啥的疑问了,现在回去开始一步步解读如何实现手动触发事件。

重新看trigger函数源码

先把后面的一些代码给删除了,我们先理解这几句代码。其中非常重要的一个函数就是$.Event,至于

isString => 判断是不是字符串

isPlainObject => 判断是不是存粹的对象(必须是对象,window对象除外,该对象的原型必须和Object的原型一致)

compatible => 其实就是对事件对象event做一些扩展,比如添加一些方法,重写一些方法之类的。

这几个方法暂时可以不需要太多关心.

我们主要看看$.Event,这里面几乎含有如何手动触发一个dom事件的大部分步骤和内容。

我们主要看看$.Event,这里面几乎含有如何手动触发一个dom事件的大部分步骤和内容。

我们主要看看$.Event,这里面几乎含有如何手动触发一个dom事件的大部分步骤和内容。

$.Event是个啥

创建并初始化一个指定的dom事件对象, 如果给定了props,则将其扩展到事件对象上

注释已经写的很清楚了,这个函数就是返回一个经过初始化了的事件对象

到这里我们直接归纳一下要手动触发一个dom事件的基本步骤

手动触发一个dom事件,需要3步,如果你对document.createEvent,不是很熟悉,可以点击查看。

  1. 创建一个事件对象 document.createEvent(event)
  2. 初始化事件对象 event.initEvent(type, bubbles, true)
  3. 分发事件 dom.dispatchEvent(event)

到这里已经完成了前面两步,还剩最后一步了,在来看trigger剩下的代码

手动触发dom事件最后一步

最后一步其实就是将当前选中的元素进行一次each遍历,然后判断要触发的事件是不是focus或者blur,如果是就直接执行。

再进一步,如果dispatchEvent方法在当前的dom元素属性中存在,那么便将该事件触发。(为什么要这一步呢?因为我们知道$()函数的使用方式有很多,有些方式得到的zepto对象是没有选中dom节点的)

最后还有一个else分支,这个分支处理走的不是手动触发事件,而是直接触发注册事件时添加的事件处理程序(因为这里涉及到zepto事件模块中如何管理元素与事件队列的映射关系,篇幅会比较长,会在接下来的文章中说,这里不展开说明)

手动diy一个

根据上面的描述,手动触发DOM事件,原来并没有那么神奇,完成三步,即可达到目标。我们自己来手动写一个示例

这个时候控制台打印出了

1是item1的事件处理函数打印出来的。

后面的li那部分则是list打印出来的。

如果将initEvent的第二个参数设置为false,将不允许冒泡,则只会打印出1

结尾

如果这部分对你有点点帮助,点个star好不好呀!

仓库地址

评论 ( 1 )
最新评论