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

本文作者:IMWeb 谦龙 原文出处:IMWeb社区 未经同意,禁止转载

前言

前端在最近几年实在火爆异常,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的这三大功能。

<ul class="list">
  <li>1</li>
  <li>2</li>
</ul>
let $list = $('.list')

let cb1 = function (e, name) {
  console.log(1, name)
}

let cb2 = function (e, name) {
  console.log(2, name)
}

$list.on('click', cb1)
$list.on('click', cb2)

// 移除事件

// 我们可以指定移除click事件的某个事件处理程序
$list.off('click', cb1)
// 也可以直接移除click事件
$list.off('click')

// 手动触发事件
$list.trigger('click', 'qianlongo')

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

一步步看trigger怎么实现

直接上代码

$.fn.trigger = function (event, args) {
  // 对传入的event进行处理,如果是字符串或者纯对象,得到一个自己创建的事件对象
  // 如果传入的已经是个经过$.Event处理的对象,则放入compatible再次改造(其实就是添加了几个方法,和重写了几个方法)
  event = (isString(event) || $.isPlainObject(event)) ? $.Event(event) : compatible(event)
  // args传递给事件处理程序的参数
  event._args = args
  return this.each(function () {
    // handle focus(), blur() by calling them directly
    if (event.type in focus && typeof this[event.type] == "function") this[event.type]()
    // items in the collection might not be DOM elements
    // 触发dom事件
    else if ('dispatchEvent' in this) this.dispatchEvent(event)
    // 因为zepto对象内部的元素不一定是dom元素,此时直接触发回调函数
    else $(this).triggerHandler(event, args)
  })
}

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

$是啥啊!!!

$.fn是啥啊!!!

$.isPlainObject又是啥啊!!!

$.Event又是什么鬼?

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

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

首先看看zepto.js模块

var Zepto = (function () {
  // xxxx
  var $ = function (selector, context) {
    return zepto.init(selector, context)
  }
  return $

  zepto.Z.prototype = Z.prototype = $.fn
  // xxxx
})()

window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)

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

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

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

(function ($) {
  // xxx
  $.fn.on = function () {//xxxx}
  $.fn.off = function () {//xxxx}
  $.fn.trigger = function () {//xxxx}
  $.Event = function () {//xxx}
  // xxx
})(Zepto)

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

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

重新看trigger函数源码

$.fn.trigger = function (event, args) {
  // 对传入的event进行处理,如果是字符串或者纯对象,得到一个自己创建的事件对象
  // 如果传入的已经是个经过$.Event处理的对象,则放入compatible再次改造(其实就是添加了几个方法,和重写了几个方法)
  event = (isString(event) || $.isPlainObject(event)) ? $.Event(event) : compatible(event)
  // args传递给事件处理程序的参数
  event._args = args

  // xxx
}

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

isString => 判断是不是字符串

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

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

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

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

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

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

$.Event是个啥

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

 $.Event = function (type, props) {
  // 当type是个对象时,比如{type: 'click', data: 'qianlongo'}
  if (!isString(type)) props = type, type = props.type
  // click,mousedown,mouseup mousemove对应MouseEvent
  // 其他事件对应为Events
  // 并把bubbles设置为true,表示事件冒泡,为false则不冒泡
  var event = document.createEvent(specialEvents[type] || 'Events'), bubbles = true
  // 当props存在的时候,对props进行循环处理,将其属性扩展到event对象上
  if (props) for (var name in props) (name == 'bubbles') ? (bubbles = !!props[name]) : (event[name] = props[name])
  // 初始化事件对象,第一个为事件类型,第二个为冒泡与否,第三个为是否可以通过preventDefault来阻止浏览器默认行为
  event.initEvent(type, bubbles, true)
  // 再对创造出来的时间对象处理一番并返回
  return compatible(event)
}

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

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

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

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

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

手动触发dom事件最后一步

 $.fn.trigger = function (event, args) {
  // 对传入的event进行处理,如果是字符串或者纯对象,得到一个自己创建的事件对象
  // 如果传入的已经是个经过$.Event处理的对象,则放入compatible再次改造(其实就是添加了几个方法,和重写了几个方法)
  event = (isString(event) || $.isPlainObject(event)) ? $.Event(event) : compatible(event)
  // args传递给事件处理程序的参数
  event._args = args
  return this.each(function () {
    // handle focus(), blur() by calling them directly
    if (event.type in focus && typeof this[event.type] == "function") this[event.type]()
    // items in the collection might not be DOM elements
    // 触发dom事件
    else if ('dispatchEvent' in this) this.dispatchEvent(event)
    // 因为zepto对象内部的元素不一定是dom元素,此时直接触发回调函数
    else $(this).triggerHandler(event, args)
  })
}

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

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

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

手动diy一个

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

<ul class="list">
  <li class="item1">1</li>
  <li>2</li>
  <li>3</li>
</ul>
let $list = document.querySelector('.list')
let $item1 = document.querySelector('.item1')

$list.addEventListener('click', function () {
  console.log(this)
}, false)

$item1.addEventListener('click', function () {
  console.log(this)
}, false)

// 1. 创建一个事件对象 document.createEvent(event)
let event = document.createEvent('Event')
// 2. 初始化事件对象 event.initEvent(type, bubbles, true)
event.initEvent('click', true, true)
// 3. 分发事件  dom.dispatchEvent(event)
$item1.dispatchEvent(event)

这个时候控制台打印出了

1

<li class="item1">1</li>
<li>2</li>
<li>3</li>

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

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

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

结尾

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

仓库地址

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逸鹏说道

Jupyter-Notebook版的博客园美化

文章汇总:https://www.cnblogs.com/dotnetcrazy/p/9160514.html

2305
来自专栏软件开发

前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

框架是一个软件的半成品,在全局范围内给了大的约束。库是工具,在单点上给我们提供功能。框架是依赖库的。AngularJS是框架而jQuery则是库。

1113
来自专栏软件开发

前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

一、前端MVC概要 1.1、库与框架的区别 ? 框架是一个软件的半成品,在全局范围内给了大的约束。库是工具,在单点上给我们提供功能。框架是依赖库的。Angula...

33710
来自专栏贾老师の博客

Bash Style Guide

1192
来自专栏java一日一条

编写一个非常简单的 JavaScript 编辑器

当然,我们已经有可以使用的很好的Web编辑器:你只需下载,并插入页面即可。我以前习惯于使用CodeMirror和ACE。例如,我为CodeMirror写了一个插...

1332
来自专栏赵康的专栏

在Atom中配置Python开发环境

当然,这里有很多很棒的文本编辑器。例如Sublime Text, Brackets, Atom。我一直都是Atom的粉丝,因为它是完全免费的,而且它有很多可用的...

1K13
来自专栏更流畅、简洁的软件开发方式

【自然框架】——页面基类与设计模式(二) 模板模式

前篇:【自然框架】——页面基类与设计模式(一)桥接模式 桥接模式的补充:(下面的一段是桥接模式里后补充的一段,桥接模式的一个小结) 什么是交接模式?引用《大话设...

26510
来自专栏我和我大前端的故事

我练习项目眼中的 vue

因为毕业设计开始了 vue 的学习之路,曾写过一些入门的 vue 小白学习文章系列(2018 我所了解的 Vue 知识大全(一))。如今已经工作半年了,这一次想...

3132
来自专栏互联网杂技

react+redux+webpack教程2

先弄个什么例子呢?如果是现代的MVVM框架,可能会用双向绑定来吸引你。那react有双向绑定吗? 没有。 也算是有吧,有插件。不过双向绑定跟react不是一个路...

3417
来自专栏JackieZheng

AngularJS入门心得1——directive和controller如何通信

  粗略地翻了一遍《JavaScript DOM编程艺术》,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too...

2366

扫码关注云+社区

领取腾讯云代金券