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 相关文章推荐
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
JS变量及其作用域
Mar 29 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
js实现小时钟效果
Mar 25 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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
Python实现Linux监控的方法
2019/05/16 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
成教毕业生自我鉴定
2013/10/23 职场文书
公司副总经理任命书
2014/06/05 职场文书
受伤赔偿协议书
2014/09/24 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
大客户经理岗位职责
2015/04/09 职场文书
担保贷款承诺书
2015/04/30 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python