向zepto.js学习如何手动(trigger)触发DOM事件
向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,不是很熟悉，可以点击查看。
- 创建一个事件对象 document.createEvent(event)
- 初始化事件对象 event.initEvent(type, bubbles, true)
- 分发事件 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好不好呀！ ???