浅析mpvue的事件代理系统
前言
说来惭愧,用 mpvue 大半年,小程序快一年了,居然还试图用 event.stopPropagation
方法阻止事件冒泡,也是有点蠢。痛定思痛,写篇博文来认真捋一捋小程序的事件系统和 mpvue 的事件代理
小程序事件系统,mpvue 事件系统和 DOM 事件系统的差别
从文档得知,小程序的 event 对象和 DOM 的 event 对象是不同的,我们还可以通过把两个对象的属性打印出来进行比较:
// 小程序 event 对象属性(8 个)
["type", "timeStamp", "target", "currentTarget", "detail", "touches", "changedTouches", "_requireActive"]
// DOM event 对象属性 / 方法(54 个)
["isTrusted", "screenX", "screenY", "clientX", "clientY", "ctrlKey", "shiftKey", "altKey", "metaKey", "button", "buttons", "relatedTarget", "pageX", "pageY", "x", "y", "offsetX", "offsetY", ..., "cancelable", "timeStamp", "srcElement", "returnValue", "cancelBubble", "path", "composedPath", "stopPropagation", "stopImmediatePropagation", "preventDefault", "initEvent"]
// mpvue event 对象属性 / 方法(9 个)
["mp", "type", "timeStamp", "x", "y", "target", "currentTarget", "stopPropagation", "preventDefault"]
我们关注一下 stopPropagation
和 preventDefault
这两个在网页中常用的方法。从打印得到的属性来看,在小程序中的 event 对象中没有这两个方法,取而代之的是借助 catchtap
这样的语法来阻止事件冒泡。另外,小程序中没有什么方式来阻止默认事件。
但是在 mpvue 中,event 对象又被挂载了这两个方法。至于这两个方法是否可以真的有用,这就需要我们了解一下 mpvue 的事件代理机制。
mpvue 的事件代理
<cover-view class="_cover-view" id="zanIcon" catchtap="handleProxy" data-eventid="{{'4'}}" data-comkey="{{$k}}">
上面是mpvue生成的wxml文件片段,如果你看过 mpvue 的生成文件,可能会发现,在 mpvue 生成的 wxml 文件中,所有的事件都被一个叫 handleProxy 的函数接管,在 handleProxy 进行处理后再去调用我们写的真正的事件处理函数。这个方法在initMp时,作为小程序Page构造函数的一个选项,从而可以在wxml中被正确调用。函数的定义如下:
// https://github.com/Meituan-Dianping/mpvue/blob/63700b2d4e4e678bc4297c71e3acd1f36647907a/src/platforms/mp/runtime/lifecycle.js#L286-L288
handleProxy (e) {
return rootVueVM.$handleProxyWithVue(e)
}
// https://github.com/Meituan-Dianping/mpvue/blob/63700b2d4e4e678bc4297c71e3acd1f36647907a/src/platforms/mp/runtime/index.js#L53-L54
import { handleProxyWithVue } from './events'
Vue.prototype.$handleProxyWithVue = handleProxyWithVue // handleProxyWithVue实现在 events.js 中
从上面的代码可以看出,handleProxy只是将小程序的event对象传给handleProxyWithVue函数进行进一步处理。接下来我们看看handleProxyWithVue都做了什么工作:
// https://github.com/Meituan-Dianping/mpvue/blob/63700b2d4e4e678bc4297c71e3acd1f36647907a/src/platforms/mp/runtime/events.js#L84-L108
export function handleProxyWithVue (e) {
const rootVueVM = this.$root
const { type, target = {}, currentTarget } = e
const { dataset = {}} = currentTarget || target
const { comkey = '', eventid } = dataset
const vm = getVM(rootVueVM, comkey.split(','))// 根据comkey找到页面对应的mpvue实例(vm)
if (!vm) {
return
}
const webEventTypes = eventTypeMap[type] || [type]
const handles = getHandle(vm._vnode, eventid, webEventTypes) //找到真正的事件处理函数
if (handles.length) {
const event = getWebEventByMP(e) // 包装为mpvue的event对象
if (handles.length === 1) {
const result = handles[0](event)
return result
}
handles.forEach(h => h(event))// 调用真实的事件处理函数
}
}
handleProxyWithVue做了以下几件事情:
从根实例开始,根据comkey找出事件处理函数所在的mpvue实例(getVm)
通过遍历找到的vm的vnode,结合eventid找到小程序事件对应的真实的事件处理函数(getHandle)
将小程序的event对象包装为mpvue的event对象(getWebEventByMP),并添加了preventDefault和stopPropagation方法
将包装后的event对象传给真实的处理函数进行调用
这就解释了生成的wxml中绑定事件的节点都有event-comkey
和event-eventid
属性,在一个事件触发时,它们是被用来寻找事件对应的vm实例和对应的事件处理函数的。
最后我们来看看getWebEventByMP函数:
// https://github.com/Meituan-Dianping/mpvue/blob/63700b2d4e4e678bc4297c71e3acd1f36647907a/src/platforms/mp/runtime/events.js#L62-L82
function getWebEventByMP (e) {
const { type, timeStamp, touches, detail = {}, target = {}, currentTarget = {}} = e
const { x, y } = detail
const event = {
mp: e,
type,
timeStamp,
x,
y,
target: Object.assign({}, target, detail),
currentTarget,
stopPropagation: noop,
preventDefault: noop
}
if (touches && touches.length) {
Object.assign(event, touches[0])
event.touches = touches
}
return event
}
从上面代码可以看出,stopPropagation和preventDefault都对应到一个叫noop的函数,而这个函数是一个空函数,也就是说在mpvue中,尽管可以调用event.stopPropagation()
,但是并没有什么用,还是要借助.stop
修饰符通过compiler编译成catchEvent
来阻止冒泡。(完)
浅析mpvue的事件代理系统的更多相关文章
- JavaScript事件代理和委托(Delegation)
JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委 ...
- Atitit事件代理机制原理 基于css class的事件代理
Atitit事件代理机制原理 基于css class的事件代理 1.1. 在javasript中delegate这个词经常出现,看字面的意思,代理.委托1 1.2. 事件代理1 1.3. 代理标准化规 ...
- Atitit.atiagent agent分销系统 代理系统 设计文档
Atitit.atiagent agent分销系统 代理系统 设计文档 1. 启动项目1 2. 首也2 3. 登录功能2 4. 用户中心2 5. 充值查询3 6. 授权下级代理4 7. 我的提成5 ...
- js中的事件委托或是事件代理详解
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
- js事件代理(委托)
JavaScript事件代理(委托)一般用于以下情况: 1. 事件注册在祖先级元素上,代理其子级元素.可以减少事件注册数量,节约内存开销,提高性能. 2. 对js动态添加的子元素可自动绑定事件. 之前 ...
- JS 事件代理
事件处理器:onclick.onmouseover.... 在传统的事件处理中,你需要为每一个元素添加或者是删除事件处理器.然而,事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越 ...
- jquery事件代理
在jQuery中,事件代理是指:把事件绑定到父级元素,然后等待事件通过DOM冒泡到该元素时再执行. 在事件侦听过程中有两种触发事件的方式:事件捕获和事件冒泡.事件冒泡更快,效率更高. 事件捕获:事件在 ...
- 封装Js事件代理方法
// 封装事件代理 function delegateEvent(element, tag, event, listener) { // 判断是否支持addEventlistener if(eleme ...
- js事件代理
需要注意的blog:http://blog.csdn.net/majian_1987/article/details/8591385 一篇博客看懂 http://blog.csdn.net/maji ...
随机推荐
- ACM-ICPC 2018 南京赛区网络预赛 J.sum(欧拉筛)
题目来源:https://nanti.jisuanke.com/t/A1956 题意:找一个数拆成无平方因子的组合数,然后求前缀和. 解题思路:我们可以把某个数分解质因数,如果某个数可以分解出三个相同 ...
- webplus知识点小结
1.返回首页,要在首页栏目里面加链接,直接预览站点的时候地址栏那个地址就行 2.上传图片变色问题,要传jpg格式,不要png 3.留言板制作:后台组件管理->留言板->获取链接 然后在留言 ...
- 学习blinker
from blinker import signal do_sth = signal('do_sth') #创建信号 def process(f, a, b, **kwargs): f(a, b, * ...
- 在Linux服务器上配置Transmission来离线下载BT种子
Transmission简介 Transmission是一种BitTorrent客户端,特点是跨平台的后端和简洁的用户界面,硬件资源消耗极少,支持包括Linux.BSD.Solaris.Mac OS ...
- # 2019-2020-3 《Java 程序设计》第四周总结
2019-2020-3 <Java 程序设计>第四周知识总结 第五章:继承 1.定义继承关系的语法结构: [修饰符] class 子类名 extends 父类名 { 类体定义 } 父类中应 ...
- 决策树模型组合之随机森林与GBDT(转)
版权声明: 本文由LeftNotEasy发布于http://leftnoteasy.cnblogs.com, 本文可以被全部的转载或者部分使用,但请注明出处,如果有问题,请联系wheeleast@gm ...
- linux关机、重启命令
1.shutdown -h 10 //计算机将在10分钟后关机,且会显示在登录用户的当前屏幕中 2.shutdown -h now //立即关机 3.shutdown -h 20:25 //系统会在2 ...
- JDK源码核心包
一.核心包有哪些? Jdk的包中,除开了lang包下面的类,用得最多的应该要属于util包下面的类了, 本篇文章主要针对Jdk的util包下面的类(util目录下面的类,暂时不包括util 包下面的子 ...
- UVa 11728 Alternate Task (枚举)
题意:给定一个 n,求一个最大正整数 N 使得 N 的所有正因数和等于 n. 析:对于任何数一个 n,它的所有正因子都是大于等于本身的,因为 n 本身就是自己的正因数,这样的就可以直接暴力了,答案肯定 ...
- cp备份操作时如何忽略指定的目录
需求场景:进行CP拷贝备份的时候,子目录里面的某些大文件或是一些log文件是无需备份的,那么在CP操作时需要忽略掉指定的目录. 案例演示如下:备份data目录,但是不包括里面的share子目录. 先看 ...