CocosCreator 监听和发射事件

监听事件

• 监听的单位是节点，所以如果要设置监听，先要获取节点。
• 事件监听函数 on 可以传四个参数完成监听。
• 第一个参数指明监听的类型。
• 第二个参数为回调函数，可以有一个参数 event ，其属性如下表：
  
• 第三个参数是 target，用于绑定响应函数的调用者，可省略。会影响回调函数中关键字 this 的取值。
• 第四个参数 useCapture（boolean）是可选参数，用于设置事件监听为捕获模式。详见分发事件。
• 除了使用 on 监听，我们还可以使用 once 方法。once 监听在监听函数响应后就会关闭监听事件。

cc.Class({
  extends: cc.Component,

  properties: {
  },

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

// 使用函数绑定
this.node.on('mousedown', function ( event ) {
  this.enabled = false;
}.bind(this));

// 使用第三个参数
this.node.on('mousedown', function (event) {
  this.enabled = false;
}, this);

关闭监听

• 当我们不再关心某个事件时，我们可以使用 off 方法关闭对应的监听事件。需要注意的是，off 方法的 参数必须和 on 方法的参数一一对应，才能完成关闭。

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);
  },
});

发射事件

• 我们可以通过两种方式发射事件：emit 和 dispatchEvent。两者的区别在于，后者可以做事件传递。
• emit 发射事件只适用于本组件之内传输，并且在其他组件内监听不到此事件。
• 我们可以在 emit 函数的第二个参数开始传递我们的事件参数。同时，在 on 注册的回调里，可以获取到对应的事件参数。最多只支持传递 5 个事件参数。

cc.Class({
  extends: cc.Component,

  onLoad () {
    this.node.on('foo', function (arg1, arg2, arg3) {
      console.log(arg1, arg2, arg3);  // print 1, 2, 3
    });
  },

  start () {
    let arg1 = 1, arg2 = 2, arg3 = 3;
    // At most 5 args could be emit.
    this.node.emit('foo', arg1, arg2, arg3);
  },
});

• 代码中，‘foo’是我们自定义的事件名称，当 emit 了一个 foo 之后，监听 foo 的监听器监听到信号，执行回调函数。

派送事件

• emit 只能在本组键中进行监听，如果我们要将信息发送给其他组件时，就需要用到 dispatchEvent 组件。
• 冒泡模式：将事件从事件发起节点，不断地向上传递给他的父级节点，直到到达根节点或者在某个节点的响应函数中做了中断处理 event.stopPropagation()
• 捕获模式：与冒泡模式相反，从最上层向下找。

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

this.node.on('foobar', function (event) {
  event.stopPropagation();
});

• cc.Event.EventCustom 是一个类，这里简单调用了构造函数，第一个参数是监听事件的名称，第二个参数是定义是否用冒泡模式
• 更多参数参考：官方文档