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了。