Coocs Creator 监听和发射事件

监听事件

事件处理是在节点(cc.Node)中完成的。对于组件,可以通过访问节点this.node来注册和监听事件。监听事件可以通过this.node.on()函数来注册。

1
2
3
4
5
6
7
8
9
cc.Class({
extends: cc.Component,

onLoad: function() {
this.node.on('mousedown', function(event) {
console.log('mousedown.')
})
}
})

事件监听函数on可以传第三个参数target,用于绑定响应函数的调用者。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
this.node.on(
'mousedown',
function(event) {
this.enabled = false
}.bind(this)
)

this.node.on(
'mousedown',
function(event) {
this.enabled = false
},
this
)

出了使用on监听外,还可以使用once方法。once监听在监听函数响应后就会关闭监听事件。

关闭监听

使用off方法关闭对应的监听事件。值的注意的是,off方法的参数必须和on方法的参数一一对应,才能完成关闭。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
cc.Class({
extends: cc.Component,

_sayHello: function() {
console.log('Hello World.')
},

onEnable: function() {
this.node.on('foobar', this._sayHello, this)
},

onDisable: function() {
this.node.off('foobar', this._sayHello, this)
}
})

发射事件

我们可以通过两种方式发射事件: emitdispatchEvent。两者的区别在于,后者可以做事件传递。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// emit
cc.Class({
extends: cc.Component,

onLoad: function() {
this.node.on('say-hello', function(event) {
console.log(event.detail.msg)
})
},

start: function() {
this.node.emit('say-hello', {
msg: 'Hello, this is very good'
})
}
})

派发事件

dispatchEvent方法用来发射事件,会进入事件派送阶段。在 Cocos Creator 中采用的是冒泡派送的方式。冒泡派送会将事件从事件发起节点,不断地向上传递给他的父级节点,直到到达根节点或在某个节点的响应函数中做了中断处理。event.stopPropagation()
A => B => C
如果从节点 C 发送事件,倘若 A,B 均做了事件的监听,则事件会经由 C 依次传递给 B,A 节点。

1
this.node.dispatchEvent(new cc.Event.EventCustom('foobar', true))

如果希望在 B 节点截获事件后就不再将事件传递,可以通过调用event.stopPropagation()函数。

1
2
3
this.node.on('foobar', function(event) {
event.stopPropagation()
})

事件对象

在事件监听回调中,会收到一个cc.Event类型的事件对象event