KISSY之Event事件
今日任务：了解学习Event事件的基础知识
Event 模块是KISSY最重要的模块之一，他包含自定义事件机制、事件对象封装、DOM事件封装、面向多终端的事件行为统一。下辖多个子模块，被Node、DOM、Base分别依赖。通常DOM事件无需直接引用event，只需use('node')即可。使用use('base')时也无需手动引入 event。但是前几节还是按照使用什么功能就引用什么模块，例如：如果想单独使用自定义事件，则需要use('event')。
Event是一个复杂的概念，是观察者模式在浏览器端的实现。事件本质上是一个抽象的概念。是让程序具有面向切面编程的特性，通过事件注册来在原有逻辑的某个时机触发外部代码的逻辑。这种方式是最常见的JavaScript设计模式。也是模块之间解耦的最佳选择之一。
事件是交互的起点，所以在讲解dom前，先来讲讲kissy中的event事件基础，即事件的监听及其监听的取消。
在KISSY.Event中最常用的方法有2个：
on: 给目标对象指定类型的事件添加监听函数。
remove：从目标对象中移除监听函数。
一、事件监听
测试页面day-4.html代码：
在day-4.js文件里代码：
单击id为demo1的按钮，弹出一个对话框，显示事件类型和目标对象id。页面截图如下：
KISSY.Event.on()接受四个参数：
target 事件目标对象
type 事件类型
fn 监听函数
scope 监听函数的 this Object. 默认指向 target.
target：事件目标对象，可以是css选择器（比如”#demo1″）或数组，这部分属于DOM的内容，会在下篇教程中讲解。
不易理解的是第四个参数scope，这个参数用于修改监听函数内部this上下文的指向，默认的this指向的是target，来看个实际的代码（实例）：
页面效果略
不加第四个参数前，this指向ev.target即id为demo1的对象，所以this.id的值应该为demo1；加了第四个参数，实例中将 this指向S.DOM.get(‘#demo2′)即id为demo2的对象，所以this.id最后是demo2，与ev.target的指向出现不一致。
第四个参数（不常用）在一些不得不修改this指向的场合非常好用。
取消监听事件：
点击“取消事件监听”后再点击实例中的“监听事件”，你就会发现没有单击事件触发了。
页面效果略
二、监听函数的event object
监听函数的event object实际上即监听函数的第一个参数（数据类型为object），包含了众多的属性（包括type、target、pageX、pageY、currentTarget 等）和一些方法。
本节只对几个重要属性进行讲述：
1）type：事件类型
2）target：事件目标对象
3）currentTarget ：当前事件目标对象
4）pageX、pageY：鼠标的x、y坐标
（1）type的使用
可以看实例，有个type的使用的经典场合：
响应的demo3-over样式为：
利用ev.type的值来判定当前是什么事件，从而确定是添加样式还是删除样式。
鼠标移到id为demo3的的按钮上时，效果图略
（2）target与currentTarget区别
这是一个很经典的问题，target与currentTarget的指向大部分是一样的，但有一些情况二者指向是不同的，下面用例子说明：
在day-4.js文件代码：
弹出窗口略
请留意二个弹出的对话框内容是不一样的！再进行下比较，我们可以很容易的得出一个结论：currentTarget永远指向监听事件的目标对象，实例中指向id为demo5的对象，而target是指向触发事件的对象，实例中是id为demo5的ul下的li。原因在于javascript事件的冒泡机制（具体的就不展开讲，与本教程关系不大）。
（3）鼠标的x、y坐标pageX、pageY：
在day-4.js文件代码：
页面显示略
id为demo6的div显示的e.pageX和e.pageY的值会随着鼠标的移动而发生变化。
event事件的基础知识就先到这里了，下一节是dom部分，它是任何js库的关键部分，也是用的最多的一部分。学完event和dom其实差不多可以真正实际应用kissy了。
如果觉得《KISSY基础篇乄KISSY之Event》对你有帮助，请点赞、收藏，并留下你的观点哦！
