1:添加按钮的方法
(1)直接创建带Button组件的节点;
(2) 先创建节点，再添加组件;
2:按钮组件, 按钮是游戏中最常用的组件, 点击然后响应事件;
3: 按钮的过渡效果:
过渡: 普通状态, 鼠标滑动到物体上, 按下状态, 禁用状态
(1)没有过渡，只有响应事件;
(2)颜色过渡, 过渡效果中使用颜色;
(3)精灵过渡，使用图片过渡;
(4)缩放过渡, 选项，在disable的时候是否置灰;

4: 按钮禁用;

是否禁用按钮

5: 按钮添加响应事件 --> 节点-->组件 --> 代码的函数;

拖拽方式添加事件

const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
    ButtonClick(event, customEventData)
    {
        console.log(event.target.name, customEventData);
    }
}

6: 按钮传递自定义参数; ---> 字符串对象;

7: Button响应这个触摸点击，所以Button所挂的这个节点，一定要有大小,如果你向大小(0, 0)的节点上，挂一个Button,这个是无法响应点击事件;

代码使用cc.Button

1: 代码添加/获取cc.Button组件;
2: 代码里面添加按钮的响应事件;
3: 代码触发按钮指定的回掉函数;
4: Component.EventHandler
var eventHandler = new cc.Component.EventHandler();
eventHandler.target = newTarget;
eventHandler.component = "MainMenu";
eventHandler.handler = "OnClick";
eventHandler.customEventData = "my data";
eventHandler.emit(["param1", "param2", ....]);

    onLoad ()
    {
        var clickEventHandler = new cc.Component.EventHandler();
        clickEventHandler.target = this.node;
        clickEventHandler.component="ButtonDemo";
        clickEventHandler.handler = "ButtonClick";
        clickEventHandler.customEventData = "click Success";

        this.node.getComponent(cc.Button).clickEvents.push(clickEventHandler);

    }

    ButtonClick(event, customEventData)
    {
        console.log(event.target.name, customEventData);
    }

emit 代码触发

    onLoad ()
    {
        var clickEventHandler = new cc.Component.EventHandler();
        clickEventHandler.target = this.node;
        clickEventHandler.component = "ButtonDemo";
        clickEventHandler.handler = "ButtonClick3";
        this.node.getComponent(cc.Button).clickEvents.push(clickEventHandler);
        this.scheduleOnce(()=>{
            var clieck_events = this.node.getComponent(cc.Button).clickEvents;
            for (let i = 0; i < clieck_events.length; i++) {
                var comp_evn_handle = clieck_events[i];
                comp_evn_handle.emit(["456456","123456"]);
            }
        },3);
        
    }
    ButtonClick3(customEventData)
    {
        console.log("***"+ customEventData);
    }

注册TOUCH事件（不能传递自定义数据）

onLoad() {
        this.node.on(cc.Node.EventType.TOUCH_START, function (event) {
            cc.log("TOUCH_START event=", event.type);
        });

        this.node.on(cc.Node.EventType.TOUCH_MOVE, function (event) {
            cc.log("TOUCH_MOVE event=", event.type);
        });

        this.node.on(cc.Node.EventType.TOUCH_END, function (event) {
            cc.log("TOUCH_END event=", event.type);
        });
    }

事件重新封装

为了避免每次写重复的代码我对上面给Button注册事件的方法进行封装，在了一个EventListener类中写静态的AddListenerToButton方法

const {ccclass, property} = cc._decorator;

@ccclass
export default class EventListener
{
    public static AddListenerToButton(target:cc.Node,component:string,handler:string,customEventData:string)
    {
        var clickEventHandler = new cc.Component.EventHandler();
        clickEventHandler.target = target;
        clickEventHandler.component = component;
        clickEventHandler.handler = handler;
        clickEventHandler.customEventData = customEventData;
        target.getComponent(cc.Button).clickEvents.push(clickEventHandler);
    }
}

调用过程如下
以后每次只需要一行代码即可

    onLoad ()
    {
        EventListener.AddListenerToButton(this.node,"ButtonDemo","ButtonClick","click Success");
    }