cocoscreator事件普通节点注册click事件

在做一个消除类游戏时&＃xff0c;需要对点击的方块做出响应。代码很简单&＃xff0c;可背后的原理还多着呢。

1. 普通节点注册click事件

在cc中如果需要相应click事件&＃xff0c;需要为该节点添加一个Button组件。或使用类似效果的事件比如

cc.Node.EventType.MOUSE_DOWN

cc.Node.EventType.TOUCH_END

//author herbert qq:464884492
//注册按钮click事件
btn.node.on(“click”, event&＃61;>{cc.log(“button click”)});
//注册MOUSE_DOWN
btn.node.on(cc.Node.EventType.MOUSE_DOWN,event&＃61;>{cc.log(“button MOUSE_DOWN”)});
//注册TOUCH_END
btn.node.on(cc.Node.EventType.TOUCH_END,event&＃61;>{cc.log(“button TOUCH_END”)})

2. 应该减少事件注册量

是否没有问题了&＃xff1f;在写juqery时&＃xff0c;有事件委托&＃xff08;delegate&＃xff09;的概念。啥意思呢&＃xff0c;就是在节点的父级注册事件&＃xff0c;来响应子节点的事件源。为啥可以实现&＃xff0c;主要归功于js事件的两大机制

事件冒泡&＃xff0c;事件响应从子节点往上冒泡到顶层节点

事件捕获&＃xff0c;事件响应冲顶层节点依次传递到最末级节点

所以问题来了&＃xff0c;消除类游戏都是通过预制资源生成不同样式的方块。若在每一方块上都注册事件&＃xff0c;势必导致内存上涨&＃xff08;虽然现在内存很大了&＃xff09;。看看cc文档&＃xff0c;事件机制完全是一样的&＃xff08;最终都是JS&＃xff09;&＃xff0c;然而我想在我的Canvas上注册一个click事件&＃xff0c;问题出现了。

3.问题来了

问题就是我在Canvas上注册了click事件&＃xff0c;点击button时&＃xff0c;Canvas 上居然没有收到我的click事件。由此我查看cc源码&＃xff0c;写了一堆测试代码&＃xff0c;最总得出以下结

click事件确实Button组件特殊存

click事件不会向上或向下传递

node.emit触发事件不会向上或向下传递

node.dispatchEvent支持事件向上或向下传递

使用node.dispatchEvent参数必须是 cc.Event.EventCustom对象

4.click事件特殊在哪里

cc.Button 组件中的click事件&＃xff0c;其实是cc的自定义事件&＃xff0c;源码为证

//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 &＃61; false;
this._updateState();
event.stopPropagation(); //停止冒泡
},
…

所以&＃xff0c;之所Button能响应click事件&＃xff0c;是因为组件注册了TOUCH_END事件&＃xff0c;并在响应该事件函数中发射一个click事件。

5. Javascript 自定义事件

参考mdn文档&＃xff0c;js自定事件方式如下

// author:herbert wx:464884492
5.了解下cc.node.emit

cc.node.emit 最终调用的是CallbacksInvoker.prototype.invoke 方法&＃xff0c;从源码来看&＃xff0c;是从对应的缓存对象中找到注册的回调方法&＃xff0c;依次调用回调函数。

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

所以click自然不会往上或往下传递。

6.dispatchEvent&＃xff0c;事件冒泡

dispatchEvent 利用自定义事件的 bubbles 属性&＃xff0c;实现冒泡。至于为啥使用 btn.node.dispatchEvent(new cc.Event.EventMouse(cc.Node.EventType.MOUSE_DOWN, true))没有触发事件是因为cc在底层&＃xff0c;将事件类型统一改成了 cc.Event.MOUSE&＃xff0c;源码为证

author:herbert wx:464884492
…
var EventMouse &＃61; function (eventType, bubbles) {
cc.Event.call(this, cc.Event.MOUSE, bubbles);
…
};