cocos creator 学习笔记（五）——事件篇

事件可以说是简单游戏中最为重要的东西。我得好好学学这个东西，希望一切顺利。

1、事件的监听与关闭

事件必须和节点（cc.Node）相关联。监听事件可以通过对节点开启监听函数来注册。

onLoad : function(){                        //事件放在onLoad函数中，在初始化时执行一次。
  this.node.on('mousedown',function(event){    //对节点开启.on 函数（监听的事件，监听到事件后的function功能函数，执行对象）
  console.log('Hello!');
});
},

重要的事情再说一遍：on 函数，有三个参数（监听的事件，监听到事件后的功能函数，功能函数执行对象）。once 监听函数与 on 监听函数的区别，once 在监听函数响应后会自动关闭监听事件。

关闭监听事件——使用off 函数。

    off 函数与on 函数的参数需要一一对应。（也就是说应该完全一样）

this.node.on('foobar',this._sayHello,this);    //开启监听————三个参数
this.node.off('foobar',this._sayHello.this);    //关闭监听————参数一样

2、发射事件（我喜欢叫它发射信号）

    对应事件监听的第一个参数——教程通常在这里使用 '字符串' 来表示信号的名字。发射事件就是制造要被监听的初始信号。发射事件有两种函数方式（emit 与 dispatchEvent）

onLoad: function(){                            //初始函数运行一次
  this.node.on('say-hello',function(event){    //开启事件监听，监听'say-hello'事件。
  console.log(event.detail.msg);
});
},

start: function(){                            //start函数，onLoad后的一次逻辑执行
  this.node.emit('say-hello',{                //emit 发射函数。第一个参数，'say-hello'事件名称，第二参数{事件内容}
  msg: 'Hello, this is Cocos Creator',
});
},

emit 发射事件是向全局发送的函数。

dispatchEvent 函数是派送事件函数。

事件派送系统——冒泡派送事件——从事件发起节点向上传递到父级节点，直到到达根节点或在某个响应函数中断处理 event.stopPropagation() 。事件 . 停止传播（）。

接下来是例子，A 是B 的父节点，然后B 是C 的父节点，一条线下来。

//首先在C节点中使用 dispatchEvent 来发射事件'foobar'。
this.node.dispatchEvent( new cc.Event.EventCustom('foobar',true));    //这里有新建自定义事件的例子。
//在节点B中监听'foobar'事件，然后关闭它。这样 A 就接收不了了。否则还会继续往 A 发送。
this.node.on('foobar',function(event){
  event.stopPropagation();
});

来看看这个新建事件的例子。new cc.Event.EventCustom —— 新建一个自定义事件对象（一个参数是事件类型'事件名字'，另一个boolean变量表示是否进行冒泡排序。）—— 更多的属性在 API 中找吧。与emit的参数不同。

 

3、cc.Event —— API 说明列表

常用属性

type —— 事件类型（事件名）    target —— 接收到事件的原始对象    currentTarget —— 接收到事件的当前对象     getType —— 获取事件类型    stopPropagation —— 停止冒泡阶段    getCurrentTarget —— 获取当前接收到事件的目标节点

另外对 cc.Event.EventCustom 自定义事件        detail —— 自定义事件的信息    setUserData —— 设置自定义事件的信息    getUserData —— 获取自定义事件的信息

 

4、节点系统事件

    系统内置的基础事件 —— 包括鼠标、触摸、键盘、重力传感。其中鼠标与触摸事件与节点树相关，键盘与重力事件则属于全局系统事件。我们把两部分 分开介绍——首先是节点事件。

    系统事件和普通事件一样需要注册与监听，事件名使用DOM事件标准（不懂这个标准是什么）——不过从例子来看，你可以通过系统已经定义好的事件类型 '事件名' 来直接开启监听——换句话说就是背一下系统事件名列表。

 

// 使用枚举事件类型来注册 —— EventType下的某个对象
node.on(cc.Node.EventType.MOUSE_DOWN, function (event) {
  console.log('Mouse down');
}, this);
// 使用系统内置的事件名来注册 —— 直接使用 'mousedown'
node.on('mousedown', function (event) {
  console.log('Mouse down');
}, this);

鼠标事件与触摸事件列表 —— 这两个事件还蛮类似的

'mousedown' —— 目标区域内按键时触发一次

'mouseenter' —— 鼠标进入节点区域时

'mousemove' —— 鼠标在节点区域内移动时

'mouseleave'  ——  鼠标离开节点区域时

'mouseup' —— 从按下状态松开时触发

'mousewheel' —— 滚动滚轮

上面这些事件名字还是不难记得 —— 枚举定义的方法也很好对应    cc.Node.EventType.MOUSE_DOWN （事件名全部大写，中间夹下横线）

接下来还列举了一些 cc.Event.EventMouse(鼠标事件)专门对应的API

getScrollY 返回滚轮滚动的Y轴距离   getLocation 获得鼠标的位置对象，包含X,Y ——所以有 getLocationX 与 getLocationY 

getPreviousLocation 获取上次位置对象    getDelta 获取这次与上次移动距离的对象

注意：单另出来一想，关于鼠标事件的左中右键—— .BUTTON_LEFT ; .BUTTON_RIGHT ; .BUTTON_MIDDLE ;

触摸事件在某些意义上来说更加厉害，触摸事件设置后能同时相应移动平台的触摸，与桌面平台的鼠标操作（不过操作起来很奇怪就是了，还是要分开搞）。然后让我们同样的看一看这些事件列表：

'touchstart' —— 触点落入节点内

'touchmove' —— 触点在节点区域内移动

'touchend' —— 手指在节点区域内离开屏幕

'touchcancel' —— 手指在节点区域外离开屏幕

然后是touch事件（cc.Event.EventTouch）的API：

touch——与当前事件关联的触点对象    getID——获取触点ID（多点触摸逻辑）    getLocation——获取触点对象（X,Y）

getLocationX——触点X位置    getLocationY——触点Y位置    getPreviousLocation——获取触点上一次触发事件的位置对象

getStartLocation——获得触点初始时的位置对象    getDelta——获得和上一次的距离的对象

触摸事件的冒泡排列——和一般的冒泡事件一样，从子叶节点向上父节点连续触发通知事件——当然，触摸事件多了区域判断的逻辑。所以和普通的冒泡过程一样，我们可以通过event.stopPropagation函数来停止冒泡过程。

cc.Node的其它系统内置事件

'position-changed'——位置变化事件    'rotation-changed'——旋转变化事件    'scale-changed'——缩放变化事件      'size-changed'——宽高变化事件    'anchor-changed'——锚点变化事件

5、全局系统事件

全局事件与节点树无关，它是由 cc.systemEvent 派发的。—— 目前支持两种全局事件：键盘按键与重力感应。

目前来看我们先着重于键盘按键，个人对重力感应目前没什么兴趣。

全局事件通过 cc.systemEvent.on(type , callback, target) 来注册。—— 这里的 type 是可选的：

cc.SystemEvent.EventType.KEY_DOWN（键盘按下）

cc.SystemEvent.EventType.KEY_UP（键盘释放）

这里的 KEY 替换为按键值 —— 注意，按键值太多 —— 在API文件里看按键值的名称好了（目前是这个网址http://docs.cocos.com/creator/api/zh/enums/KEY.html）

然后我们看看下面这个程序例子：

 

cc.Class({
    extends: cc.Component,
    onLoad: function () {        //初始化函数
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);//callback函数在其它地方定义this.onKeyDown
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);    
    },

    onDestroy () {            //销毁函数，通常取消资源释放内存什么的
        cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);//on与off在参数上完全相同
        cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
    },

    onKeyDown: function (event) {        //功能函数 function(event) —— 输入函数event
        switch(event.keyCode) {            //switch 函数，枚举类型的判断函数
            case cc.KEY.a:                 //如果event.keyCode（事件的键盘值）是cc.KEY.a
                console.log('Press a key');//
                break;
        }
    },

    onKeyUp: function (event) {
        switch(event.keyCode) {
            case cc.KEY.a:
                console.log('release a key');
                break;
        }
    }
});

上面这个程序其实蛮好懂，但是按键真的很复杂…………需要实际练习练习。

这里就是事件篇的全部内容了。有了这个实际上已经可以完成很多逻辑了。