Javascript前端UI框架Kit使用指南之kitjs事件管理


Posted in Javascript onNovember 28, 2014

从今天这章开始,我将会着重介绍KitJs的事件管理的内容,尽量用浅显的语言给大家揭露主流的js框架是如何在内部实现自己独立的事件管理功能的。

(一)普通的Dom事件

我们一般可以通过支持在HTML写上事件

<a onclick=”alert(1)”>测试</a>

或者取到dom对象后绑定

document.getElementById(‘a').onclick=function(){alert(1)}

或者二级事件

document.getElementById(‘a').addEventListener(‘click',function(){alert(1)},flase)

或者通过script tag

<script for=”a” event=”onclick”>alert(1)</script>

而W3C标准推荐的是以上的第三种方式绑定,既二级事件的方式,目的是解耦HTML与Js的强依赖

(二)问题

但是如果我们仅仅直接使用方式3的方式进行我们的Js编程的话,还是不够的,因为会遇到以下问题

1. 浏览器兼容性,IE系列和W3C支持的浏览器对于二级事件绑定的方式名,参数都不一致

2. 通过2级事件绑定之后,你无法知道别人对于同一个元素有没有绑定过事件,绑定了哪些事件,事件内容是什么?

3. 通过2级事件绑定的方法触发后,顺序不是按照绑定之前的先后顺序,是随机执行的,可有些时候,我们需要对于触发的方法按照顺序

4. 当同一个元素的事件被触发之后,没有w3c的标准api支持对于同一个元素绑定着的其他事件停止继续触发,w3c支持停止冒泡

5. 很多时候,我们是通过匿名函数的方法注册2级事件的,没有留下注册事件执行方法的句柄,所以很难通过removeEventListener注销该事件

(三)Kit如何解决

ok,js框架就是为了解决以上问题而存在的,让我们看看kit是如何处理以上问题的。

在kit.js的api中,存在一个ev(config)方法

Javascript前端UI框架Kit使用指南之kitjs事件管理

该方法接受一个Map类型的object,里面存在了4个重要参数,

el 需要绑定的元素

String 事件类型

fn 触发执行的方法

scope 可以省略,是否需要指定this指针,如无,则传入注册时的el作为this指针

(四)代码解析

让我们进一步看看代码实现

直接从核心部分看起

Javascript前端UI框架Kit使用指南之kitjs事件管理

如果传入参数不为空,那个在传入参数的el上建立一个对象,用于保存KitJs的事件注册evReg

evReg对象里面有两个子对象,一个叫做evRegEv,保存注册的事件

在evRegEv对象里面,保存一个key为当前注册事件,value为一个数组,数组里面按照先来后到的顺序放入方法ev传入的config参数,注意了,这个是一个数组!!!因为数组可以保存先后顺序,这一点非常重要

还有一个叫做evRegFn,保存事件触发的匿名方法,

Javascript前端UI框架Kit使用指南之kitjs事件管理

Javascript前端UI框架Kit使用指南之kitjs事件管理

我们可以看到evRegFn是一个匿名事件,在开头,他会判断一下global的变量window[me.CONSTANTS.KIT_EVENT_STOPIMMEDIATEPROPAGATION]是否==true,如果是true的话,即会返回,不会再继续执行

接着往下看,他会接受到事件触发的EV对象,给这个EV用mergeIf的方式附加很多对象,像target,currentTarget,relatedTarget是为了解决浏览器兼容性的问题

而stopNow,stopDefault,stopGoOn是为了阻止事件继续触发而创建的方法。

下面这段就是evRegFn的关键了,我们会循环之前创建的那个evRegEv里面的事件数组,按照先后顺序,取出之前的ev方法传入的config参数,执行config参数里面方法,如果方法的返回值不为空,则返回他的返回值

Javascript前端UI框架Kit使用指南之kitjs事件管理

最后做一个浏览器兼容,用2级事件的方式,绑定我们的evRegFn匿名方法。

(五)小结

简单来说,Kit用一个自己的匿名方法,缓存了事件注册的句柄,到一个数组里面,这样就可以记住事件的先后顺序,以及提供入口找出之前注册的事件,参数,方法等等,同时针对浏览器兼容性做了兼容。

(六)注销事件

有了Kit帮忙缓存事件句柄,注销就变得简单了

Javascript前端UI框架Kit使用指南之kitjs事件管理

你可以看到Kit通过直接对比,或者fn.toString对比,以及fn.toString().trim()的方式对比来找到对应的事件config,从数组中删除

(七)事件增强

大家刚才也应该留意到Kit对于系统的Event对象做了一个mergeIf的操作,首先为什么要做megerIf,因为系统的Event的对象属性是Readonly的,不能覆盖,只能添加他没有的属性

所以Kit只能megerIf,我们都知道各个浏览器的事件对象Event Object存在一个不兼容性,所以就需要Kit去fix这些不兼容,比如IE没有target属性,只有srcElement,我们可以给他加上target属性,实现W3c标准的兼容

当然了,仅仅的修复是不能满足我们的需求的,很多时候,我们还需要给Event对象做一点小小的增肥

比如在iphone的touchdown,touchmove开发的时候,我们经常要取到单指的offset,而取单指的offset,又需要ev.targetTouches[0].clientX,这样的代码,但是一旦在匿名函数这样了,在PC上又不兼容了,

怎么办呢,没有关系,我们可以给Event Object mergeIf我们自己的属性

Javascript前端UI框架Kit使用指南之kitjs事件管理

Javascript前端UI框架Kit使用指南之kitjs事件管理

Javascript前端UI框架Kit使用指南之kitjs事件管理

firstFingerClientX等等,这样我们就可以很简单的实现移动端,PC端开发的代码统一了。

包括,下一篇要说HTML5拖拽,高级手势事件都是基于这一基础之上架构的。

补充一下,为什么不像ExtJs那样new一个自己的Event,是因为

1. 系统原生的对象,有一定的继承关系,不想破坏

2. 如果用自己的new Object,可能会造成代码脱离框架之后,不可移植性,需要再次改变代码内容

Javascript 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
jQuery Ajax全解析
Feb 13 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
vue实现员工信息录入功能
Jun 11 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 #Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 #Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 #Javascript
开源的javascript项目Kissy介绍
Nov 28 #Javascript
对比分析json及XML
Nov 28 #Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 #Javascript
javascript基本类型详解
Nov 28 #Javascript
You might like
Yii2增加验证码步骤详解
2016/04/25 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
python提取内容关键词的方法
2015/03/16 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
Python for循环与range函数的使用详解
2019/03/23 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
Python如何将字符串转换为日期
2020/07/31 Python
python3处理word文档实例分析
2020/12/01 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
视图的作用
2014/12/19 面试题
供电工程专业求职信
2014/08/09 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
企业催款函范本
2015/06/24 职场文书
公司董事任命书
2015/09/21 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
MySQL 数据库范式化设计理论
2022/04/22 MySQL