在作一個消除類遊戲時,須要對點擊的方塊作出響應。代碼很簡單,可背後的原理還多着呢。javascript
在cc中若是須要相應click事件,須要爲該節點添加一個Button組件。或使用相似效果的事件好比java
//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")}) 複製代碼
是否沒有問題了?在寫juqery時,有事件委託(delegate)的概念。啥意思呢,就是在節點的父級註冊事件,來響應子節點的事件源。爲啥能夠實現,主要歸功於js事件的兩大機制node
因此問題來了,消除類遊戲都是經過預製資源生成不一樣樣式的方塊。若在每一方塊上都註冊事件,勢必致使內存上漲(雖然如今內存很大了)。看看cc文檔,事件機制徹底是同樣的(最終都是JS),然而我想在個人Canvas上註冊一個click事件,問題出現了。git
問題就是我在Canvas上註冊了click事件,點擊button時,Canvas 上竟然沒有收到個人click事件。由此我查看cc源碼,寫了一堆測試代碼,最終得出如下結github
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事件。微信
參考mdn文檔,js自定事件方式以下markdown
// 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> 複製代碼
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天然不會往上或往下傳遞。oop
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); ... }; 複製代碼
場景
運行效果
作開發,無論是開發遊戲仍是其餘應用程序。思路基本是同樣的。再簡單的事,多想一想,再發散一下,你會收穫更多。 須要進cocos遊戲開發羣的朋友,請添加我微信回覆cocos