Cocos Creator開發中如何實現按鈕節點的事件

小編給大家分享一下Cocos Creator開發中如何實現按鈕節點的事件，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

Cocos Creator基于Cocos2d-x（C++方案），提出全新的編程理念。Cocos Creator是以內容創作為核心的游戲開發工具，在Cocos2d-x基礎上實現了徹底腳本化（可以使用Javascript、Typescript或者Coffeescript）、組件化和數據驅動等特點。
但是，在事件處理機制上并不顯得簡單，至少是新手初學階段如此。

試驗目的

通過為按鈕組件設置一個點擊事件來實現在控制臺輸出一段文本。

試驗步驟

在場景中Canvas節點上添加一個UI節點Button并選擇此節點，注意到其事件有關屬性如圖所示：

也就是說，Click Events屬性是列表類型，默認為空，用戶添加的每一個事件由節點引用，組件名稱，一個響應函數及定制事件參數組件組成。
只有當我們把Click Events事件屬性列表結點個數修改成大于或者等于1時，對應的事件參數才顯示出來，各個參數含義如下：

圖形效果展示如下：

上圖是把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);
}

});

保存上面的腳本后，通過點擊場景中按鈕節點對應“屬性檢查器”窗口中下部的“添加組件”按鈕為此按鈕節點添加一個“用戶腳本組件”并選擇上面剛剛創建的腳本。

然后，拖動層級管理器中的按鈕節點到按鈕事件屬性對應的第一個參數處，并以此為基礎，依次選擇第二個已經綁定到該按鈕節點上的腳本組件以及第三個回調參數（上面腳本中已經定義了，是callback）。結果如下所示：

以上是“Cocos Creator開發中如何實現按鈕節點的事件”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！