KISSY基础篇乄KISSY之Event
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代码：
| <buttonid="demo1">点我</button><br> <buttonid="demo2">再点我</button> <divid="demo3">此处id为demo3</div> <button id="demo4">取消监听事件</button> |
在day-4.js文件里代码：
| KISSY.use('event',function(S,Event){ Event.on('#demo1','click',function(ev){ alert('你触发了'+ev.type+'事件,目标对象id为'+ev.target.id); }); }); |
单击id为demo1的按钮，弹出一个对话框，显示事件类型和目标对象id。页面截图如下：
KISSY.Event.on()接受四个参数：
target 事件目标对象
type 事件类型
fn 监听函数
scope 监听函数的 this Object. 默认指向 target.
target：事件目标对象，可以是css选择器（比如”#demo1″）或数组，这部分属于DOM的内容，会在下篇教程中讲解。
不易理解的是第四个参数scope，这个参数用于修改监听函数内部this上下文的指向，默认的this指向的是target，来看个实际的代码（实例）：
| KISSY.use('event',function(S,Event){ Event.on('#demo2','click',function(ev){ alert('你触发了'+ev.type+'事件,目标对象id为'+ev.target.id+'，但是this指向id为'+this.id+'的对象'); },S.DOM.get('#demo3')); }); |
页面效果略
不加第四个参数前，this指向ev.target即id为demo1的对象，所以this.id的值应该为demo1；加了第四个参数，实例中将 this指向S.DOM.get(‘#demo2′)即id为demo2的对象，所以this.id最后是demo2，与ev.target的指向出现不一致。
第四个参数（不常用）在一些不得不修改this指向的场合非常好用。
取消监听事件：
点击“取消事件监听”后再点击实例中的“监听事件”，你就会发现没有单击事件触发了。
| KISSY.use('event',function(S,Event){ Event.on('#demo4','click',function(){ Event.remove('#demo1','click'); alert("已经取消了对demo1的监听"); }); }); |
页面效果略
二、监听函数的event object
监听函数的event object实际上即监听函数的第一个参数（数据类型为object），包含了众多的属性（包括type、target、pageX、pageY、currentTarget 等）和一些方法。
本节只对几个重要属性进行讲述：
1）type：事件类型
2）target：事件目标对象
3）currentTarget ：当前事件目标对象
4）pageX、pageY：鼠标的x、y坐标
（1）type的使用
可以看实例，有个type的使用的经典场合：
| KISSY.use('event',function(S,Event){ Event.on('#demo3','mouseover mouseout',function(ev){ if(ev.type=='mouseover'){ S.DOM.addClass('#demo3','demo3-over'); } else if(ev.type=='mouseout'){ S.DOM.removeClass('#demo3','demo3-over'); } }); }); |
响应的demo3-over样式为：
| .demo3-over{background-color:#09FFFF ;color:#000000;} |
利用ev.type的值来判定当前是什么事件，从而确定是添加样式还是删除样式。
鼠标移到id为demo3的的按钮上时，效果图略
（2）target与currentTarget区别
这是一个很经典的问题，target与currentTarget的指向大部分是一样的，但有一些情况二者指向是不同的，下面用例子说明：
在day-4.js文件代码：
| KISSY.use('event',function(S,Event){ Event.on('#demo5','click',function(ev){ alert(S.DOM.text(ev.currentTarget)); alert(S.DOM.text(ev.target)); }); }); |
弹出窗口略
请留意二个弹出的对话框内容是不一样的！再进行下比较，我们可以很容易的得出一个结论：currentTarget永远指向监听事件的目标对象，实例中指向id为demo5的对象，而target是指向触发事件的对象，实例中是id为demo5的ul下的li。原因在于javascript事件的冒泡机制（具体的就不展开讲，与本教程关系不大）。
（3）鼠标的x、y坐标pageX、pageY：
在day-4.js文件代码：
| KISSY.use('core', function (S) { var $ = KISSY.Node.all; $(document).on('mousemove',function (e) { $("#demo6").text("e.pageX: " + e.pageX +", e.pageY: " + e.pageY); }); }); |
页面显示略
id为demo6的div显示的e.pageX和e.pageY的值会随着鼠标的移动而发生变化。
event事件的基础知识就先到这里了，下一节是dom部分，它是任何js库的关键部分，也是用的最多的一部分。学完event和dom其实差不多可以真正实际应用kissy了。