CocosCreator monitor and launch events

Monitor events

• The monitor unit is a node, so if you want to set the listener, first obtain node.
• Event listener function on four parameters can be passed to complete the monitoring.
• The first parameter specifies the type of listening.
• The second parameter is the callback function, there may be a parameter Event, its properties in the following table:
  
• The third parameter is the target, in response to the caller for binding function, may be omitted. Callback function will affect the value of the keyword this.
• The fourth parameter useCapture (boolean) is an optional parameter is used to set an event listener to capture mode. See distribution event.
• In addition to use on listening, we can also use the once method. once the listener will close listen to events after listening function response.

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

Close listening

• When we no longer care about an event, we can use the method to close off the corresponding monitor events. Note that the parameters must be off method and parameters on method of correspondence, to finish the shutdown.

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

Launch event

• We can launch event in two ways: emit and dispatchEvent. The difference is that the latter can do event delivery.
• emit launch event is only applicable to this component of the transmission, and listen not see this event in the other components.
• We can begin to deliver our event parameters in the second parameter emit function. Meanwhile, registered in the callback on where you can get to the event corresponding to the parameters. Only supports up to passed 5 event parameters.

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

• Code, 'foo' is the name of the event our custom, when emit a foo, foo listen listener listening to the signal callback function.

Delivery event

• emit only listen in this group of keys, if we want to send a message to other components, you need to use dispatchEvent components.
• Bubbling mode : the launch event from the event node, constantly passed up to his parent node until it reaches the root or do event.stopPropagation interrupt processing function in response to a node ()
• Capture mode : In contrast to the bubbling mode, from the top looking down.

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

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

• cc.Event.EventCustom is a class, simply call the constructor here, the first parameter is the name of the event to listen, and the second parameter is used to define whether a bubbling mode
• More parameters Reference: official document