查看“Cocos-Button点击事件”的源代码

==Button 点击事件==
Button 目前只支持 Click 事件，即当用户点击并释放 Button 时才会触发相应的回调函数。


==组件事件结构==

{| class="wikitable"
|-
! 属性
! 功能说明
|-
| Target
| 带有脚本组件的节点。
|-
| Component
| 脚本组件名称。
|-
| Handler
| 指定一个回调函数，当用户点击 Button 并释放时会触发此函数。
|-
| CustomEventData
| 用户指定任意的字符串作为事件回调的最后一个参数传入。
|}


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

 import { _decorator, Component, Event, Node, Button, EventHandler } from 'cc';
 const { ccclass, property } = _decorator; 
 
 @ccclass("example")
 export class example extends Component {
     onLoad () {
         const clickEventHandler = new EventHandler();
         clickEventHandler.target = this.node; // 这个 node 节点是你的事件处理代码组件所属的节点
         clickEventHandler.component = 'example';// 这个是脚本类名
         clickEventHandler.handler = 'callback';
         clickEventHandler.customEventData = 'foobar'; 
 
         const button = this.node.getComponent(Button);
         button.clickEvents.push(clickEventHandler);
     }
 
     callback (event: Event, customEventData: string) {
         // 这里 event 是一个 Touch Event 对象，你可以通过 event.target 取到事件的发送节点
         const node = event.target as Node;
         const button = node.getComponent(Button);
         console.log(customEventData); // foobar
     }
 }


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

 // 假设我们在一个组件的 onLoad 方法里面添加事件处理回调，在 callback 函数中进行事件处理
 
 import { _decorator, Component, Button } from 'cc';
 const { ccclass, property } = _decorator;
 
 @ccclass("example")
 export class example extends Component {
     @property(Button)
     button: Button | null = null;
     onLoad () {
         this.button.node.on(Button.EventType.CLICK, this.callback, this);
     }
 
     callback (button: Button) {
         // 注意这种方式注册的事件，无法传递 customEventData
     }
 }


==通过脚本触发点击==
 this.node.getComponent(Button).clickEvents[0].emit(['click']);