Cocos Creator开发中的按钮节点的事件处理方法-CSDN博客

Cocos Creator开发中的按钮节点的事件处理方法

Cocos Creator基于Cocos2d-x（C++方案），提出全新的编程理念。Cocos Creator是以内容创作为核心的游戏开发工具，在Cocos2d-x基础上实现了彻底脚本化（可以使用Javascript、Typescript或者Coffeescript）、组件化和数据驱动等特点。
但是，在事件处理机制上并不显得简单，至少是新手初学阶段如此。下面我们通过场景制作中按钮组件的事件处理机制来说明这个问题。

试验目的

通过为按钮组件设置一个点击事件来实现在控制台输出一段文本。

试验步骤

在场景中Canvas节点上添加一个UI节点Button并选择此节点，注意到其事件有关属性如图所示：

Cocos Creator开发中的按钮节点的事件处理方法
也就是说，Click Events属性是列表类型，默认为空，用户添加的每一个事件由节点引用，组件名称，一个响应函数及定制事件参数组件组成。
只有当我们把Click Events事件属性列表结点个数修改成大于或者等于1时，对应的事件参数才显示出来，各个参数含义如下：
Cocos Creator开发中的按钮节点的事件处理方法
图形效果展示如下：

Cocos Creator开发中的按钮节点的事件处理方法
上图是把Click Events事件属性列表结点个数改成1的样子。
接下来，上面几个参数的填写需要按照上面的解释进行。

为此，我们需要专门写一个相应的脚本，不妨命名为MyComponent.js（注意这里的文件名是区别大小写的，因为它还代表组件的类名），内容如下。
cc.Class({
extends: cc.Component,
properties: {},

onLoad: function () {
    var clickEventHandler = new cc.Component.EventHandler();
    clickEventHandler.target = this.node; //这个node节点是你的事件处理代码组件所属的节点
    clickEventHandler.component = "MyComponent";//这个是代码文件名
    clickEventHandler.handler = "callback";
    clickEventHandler.customEventData = "foobar";

    var button = this.node.getComponent(cc.Button);
    button.clickEvents.push(clickEventHandler);
},

callback: function (event, customEventData) {
    //这里 event 是一个 Touch Event 对象，你可以通过 event.target 取到事件的发送节点
    var node = event.target;
    var button = node.getComponent(cc.Button);
    //这里的 customEventData 参数就等于你之前设置的 "foobar"
    console.log("para is: ",customEventData);
}