cocos 《成语接龙》---Button（按钮）组件

1.什么是Button组件？

Button 组件可以响应用户的点击操作，当用户点击 Button 时，Button 自身会有状态变化。另外，Button 还可以让用户在完成点击操作后响应一个自定义的行为。

Button属性详解：

target： Node 类型，当 Button 发生 Transition 的时候，会相应地修改 Target 节点的 SpriteFrame，颜色或者 Scale。

Interactable： 是否启用

Transition： 枚举类型，包括 NONE、COLOR、SPRITE 和 SCALE。每种类型对应不同的 Transition 设置。详情见下方的 Button Transition 部分

Click Event： 列表类型，默认为空，用户添加的每一个事件由节点引用、组件名称和一个响应函数组成。详情见下方的 Button 事件部分。

2.如何为Button组件添加点击事件？

（1）通过属性检查器添加回调

首先，使用Click Events指定时间数量；
其次，在第一个选项栏（Target） 选择 指定节点；
在第二个选项栏（Component）选择 指定脚本；
在第三个选项栏（Handler）选择 指定函数；
在最后一个选项栏（CustomEventData）选择 用户指定任意的字符串，作为事件回调的最后一个参数传入。

（2）通过脚本添加回调

这种方法添加的事件回调和使用编辑器添加的事件回调是一样的，都是通过 Button 组件实现。首先需要构造一个
cc.Component.EventHandler 对象，然后设置好对应的 target、component、handler 和
customEventData 参数。

代码如下：

 // here is your component file, file name = 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 是一个 Event 对象，你可以通过 event.target 取到事件的发送节点var node = event.target;var button = node.getComponent(cc.Button);// 这里的 customEventData 参数就等于你之前设置的 "foobar"}});

通过脚本添加回调，还有一种精简的方式：

通过 button.node.on(‘click’, …) 的方式来添加，这是一种非常简便的方式，但是该方式有一定的局限性，在事件回调里面无法获得当前点击按钮的屏幕坐标点。

 // 假设我们在一个组件的 onLoad 方法里面添加事件处理回调，在 callback 函数中进行事件处理:cc.Class({extends: cc.Component,properties: {button: cc.Button},onLoad: function () {this.button.node.on('click', this.callback, this);},callback: function (button) {// do whatever you want with button// 另外，注意这种方式注册的事件，也无法传递 customEventData}});