kitjs事件管理的Javascript前端UI框架Kit用户指南

从今天这一章开始，我将重点介绍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)

或者通过脚本标签

“a”事件的脚本=“onclick”警报(1)/脚本

W3C标准推荐上述第三种绑定方式，即次要事件的方式，目的是为了解耦HTML和Js之间的强依赖性

(2)问题

然而，如果我们只使用模式3来直接编程我们的Js，这是不够的，因为我们会遇到以下问题

1.浏览器兼容性。IE系列和W3C支持的浏览器对于绑定次要事件有不同的方式名称和参数

2.通过2级事件绑定后，就无法知道其他人是否为同一个元素绑定了事件，绑定了哪些事件，事件的内容是什么。

3.被二级事件绑定的方法触发后，顺序不是绑定前的顺序，而是随机执行。然而，有时，我们需要对触发的方法进行排序。

4.相同元素的事件被触发后，没有w3c标准api支持停止触发绑定到相同元素的其他事件，w3c支持停止冒泡

5.大多数情况下，我们通过匿名函数注册二级事件，没有留下注册事件执行方法的句柄，所以很难通过removeEventListener注销事件

(3)如何解决套件

好的，js框架的存在就是为了解决上述问题。让我们看看kit是如何处理上述问题的。

kit.js的api中有一个ev(config)方法

该方法接受一个Map类型的对象，该对象包含四个重要参数。

El需要绑定的元素

字符串事件类型

Fn触发器执行方法

范围可以省略。您需要指定这个指针吗？如果没有，在注册为该指针时传入el

(4)代码分析

让我们仔细看看代码实现

直接看核心部分

如果传入参数不为空，则在传入参数的el上创建一个对象，以保存KitJs的事件注册evReg

evReg对象中有两个子对象，一个叫做evRegEv，保存注册的事件

在evRegEv对象中，将一个键保存为当前注册的事件，该值是一个数组。方法ev传入的配置参数按照先到先得的顺序放入数组。注意，这是一个数组！这非常重要，因为数组可以保持秩序

还有一个名为evRegFn的匿名方法，可以保存事件触发器。

我们可以看到evRegFn是一个匿名事件。一开始，他会判断全局变量window是否[me。constants . kit _ event _ StOpimitePropagation]为==true。如果为真，它将返回并且不会继续执行

然后往下看，他会收到事件触发的EV对象，并以mergeIf的方式给这个EV附加很多对象，比如target、currentTarget、relatedTarget，以解决浏览器兼容性的问题

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

以下段落是evRegFn的关键。我们将在之前创建的EvRegEv中循环事件数组，按顺序取出之前ev方法传入的配置参数，并执行配置参数中的方法。如果方法的返回值不为空，则返回其返回值

最后，使浏览器兼容，并以二级事件的方式绑定我们的evRegFn匿名方法。

(5)总结

简单来说，Kit使用自己的匿名方法将事件注册的句柄缓存到一个数组中，这样就可以记住事件的顺序，并提供一个条目来找出之前注册的事件、参数、方法等。同时兼容浏览器兼容性。

(6)取消事件

有了帮助缓存事件句柄的工具包，注销变得简单了

可以看到Kit通过直接比较、fn.toString比较和fn.toString()找到对应的事件配置。trim()比较，并将其从数组中删除

(7)事件有所增加

每个人都应该注意到Kit在系统的Event对象上做了一个mergeIf操作。首先为什么是megerIf，因为系统的Event的对象属性是Readonly，不能覆盖，只能添加他没有的属性。

因此，Kit只能是megerIf。我们都知道每个浏览器的Event Object中都有一个不兼容的地方，所以我们需要Kit来修复这些不兼容的地方。比如ie没有目标属性，只有srcElement，所以我们可以给它添加目标属性，实现W3c标准兼容

当然，仅仅维修是不能满足我们的需求的。在很多情况下，我们需要为Event对象做一点胖

比如在iphone的触地、touchmove的开发中，我们经常需要得到单指的偏移量，而要得到单指的偏移量，就需要ev . target touchs[0]的代码。clientX，但是一旦匿名函数出现这种情况，在PC上就不兼容了。

怎么办，没关系，我们可以给事件对象合并如果我们自己的属性

FirstFingerClientX等。这样我们就可以简单地实现移动终端和PC终端开发的代码的统一。

包括，下一篇文章会讲到HTML5拖拽，高级手势事件都是基于这个基础。

补充一下，你为什么不像ExtJs一样创建自己的事件，因为

1.系统的原始对象有一定的继承关系，不想被破坏

2.如果使用自己的新Object，可能会导致代码脱离框架，不可移植，因此需要再次更改代码内容