cocos creator 事件

cocos creator 事件

在作一個消除類遊戲時，須要對點擊的方塊作出響應。代碼很簡單，可背後的原理還多着呢。

1. 普通節點註冊click事件

在cc中若是須要相應click事件，須要爲該節點添加一個Button組件。或使用相似效果的事件好比

1. cc.Node.EventType.MOUSE_DOWN
2. cc.Node.EventType.TOUCH_END

//author herbert qq:464884492
//註冊按鈕click事件
btn.node.on("click", event=>{cc.log("button click")});
//註冊MOUSE_DOWN 
btn.node.on(cc.Node.EventType.MOUSE_DOWN,event=>{cc.log("button MOUSE_DOWN")});
//註冊TOUCH_END
btn.node.on(cc.Node.EventType.TOUCH_END,event=>{cc.log("button TOUCH_END")})
複製代碼

2. 應該減小事件註冊量

是否沒有問題了？在寫juqery時，有事件委託（delegate）的概念。啥意思呢，就是在節點的父級註冊事件，來響應子節點的事件源。爲啥能夠實現，主要歸功於js事件的兩大機制

1. 事件冒泡，事件響應從子節點往上冒泡到頂層節點
2. 事件捕獲，事件響應衝頂層節點依次傳遞到最末級節點

因此問題來了，消除類遊戲都是經過預製資源生成不一樣樣式的方塊。若在每一方塊上都註冊事件，勢必致使內存上漲（雖然如今內存很大了）。看看cc文檔，事件機制徹底是同樣的（最終都是JS），然而我想在個人Canvas上註冊一個click事件，問題出現了。

3.問題來了

問題就是我在Canvas上註冊了click事件，點擊button時，Canvas 上竟然沒有收到個人click事件。由此我查看cc源碼，寫了一堆測試代碼，最終得出如下結

1. click事件確實Button組件特殊存
2. click事件不會向上或向下傳遞
3. node.emit觸發事件不會向上或向下傳遞
4. node.dispatchEvent支持事件向上或向下傳遞
5. 使用node.dispatchEvent參數必須是 cc.Event.EventCustom對象

4.click事件特殊在哪裏

cc.Button 組件中的click事件，實際上是cc的自定義事件，源碼爲證

//author:herbert wx:464884492
...
 this.node.on(cc.Node.EventType.TOUCH_END, this._onTouchEnded, this);
...
_onTouchEnded (event) {
 if (!this.interactable || !this.enabledInHierarchy) return;
 if (this._pressed) {
 cc.Component.EventHandler.emitEvents(this.clickEvents, event);
 this.node.emit('click', this);//觸發事件
 }
 this._pressed = false;
 this._updateState();
 event.stopPropagation(); //中止冒泡
},
...
複製代碼

因此，之所Button能響應click事件，是由於組件註冊了TOUCH_END事件，並在響應該事件函數中發射一個click事件。

5. javascript 自定義事件

參考mdn文檔，js自定事件方式以下

// author:herbert wx:464884492
<script text="javascript">
let cusEvent = new Event("custom", {
    bubbles: true //容許冒泡
});
document.body.addEventListener("custom", e => {
    console.log("自定義事件");
    console.log(" Body event by custom");
});

let btn = document.querySelector("#btn");
btn.addEventListener("custom", e => {
    console.log("自定義事件");
    console.log("Button event by custom");
})
btn.dispatchEvent(cusEvent);
</script>
複製代碼

6.瞭解下cc.node.emit

cc.node.emit 最終調用的是CallbacksInvoker.prototype.invoke 方法，從源碼來看，是從對應的緩存對象中找到註冊的回調方法，依次調用回調函數。

//author herbert wx:464884492
CallbacksInvoker.prototype.invoke = function (key, p1, p2, p3, p4, p5) {
var list = this._callbackTable[key];
if (list) {
var rootInvoker = !list.isInvoking;
list.isInvoking = true;
var callbacks = list.callbacks;
var targets = list.targets;
for (var i = 0, len = callbacks.length; i < len; ++i) {
    var callbmhtack = callbacks[i];
    if (callback) {
        var target = targets[i];
        if (target) {
            callback.call(target, p1, p2, p3, p4, p5);
        }
        else {
            callback(p1, p2, p3, p4, p5);
        }
    }
}
if (rootInvoker) {
    list.isInvoking = false;
    if (list.containCanceled) {
        list.purgeCanceled();
    }
}}};
複製代碼

因此click天然不會往上或往下傳遞。

7.dispatchEvent，事件冒泡

dispatchEvent 利用自定義事件的 bubbles 屬性，實現冒泡。至於爲啥使用 btn.node.dispatchEvent(new cc.Event.EventMouse(cc.Node.EventType.MOUSE_DOWN, true))沒有觸發事件是由於cc在底層，將事件類型統一改爲了 cc.Event.MOUSE，源碼爲證

author:herbert wx:464884492
 ...
 var EventMouse = function (eventType, bubbles) {
 cc.Event.call(this, cc.Event.MOUSE, bubbles);
 ...
};
複製代碼

場景

運行效果

8.總結

作開發，無論是開發遊戲仍是其餘應用程序。思路基本是同樣的。再簡單的事，多想一想，再發散一下，你會收穫更多。 須要進cocos遊戲開發羣的朋友，請添加我微信回覆cocos

歡迎感興趣的朋友關注個人訂閱號「小院不小」，或點擊下方二維碼關注。我將多年開發中遇到的難點，以及一些有意思的功能，體會都會一一發布到個人訂閱號中。如需本文demo請在訂閱號中回覆 ccevent