监听和发射事件

百城网络

已于 2023-10-21 20:00:44 修改

阅读量90

点赞数

分类专栏： cocos学习笔记文章标签： javascript 前端开发语言

于 2022-10-28 19:59:27 首次发布

本文链接：https://blog.csdn.net/baidu_31002735/article/details/127577626

版权

cocos学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

cc.Class({
  extends: cc.Component,

  properties: {
  },

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

，这里最多只支持传递 5 个事件参数。

发射事件有两种方式：emit 和 dispatchEvent。两者的区别在于，后者可以做事件传递。我们先通过一个简单的例子来了解 emit 事件：

cc.Class({
  extends: cc.Component,

  onLoad () {
    // args are optional param.
    this.node.on('say-hello', function (msg) {
      console.log(msg);
    });
  },

  start () {
    // At most 5 args could be emit.
    this.node.emit('say-hello', 'Hello, this is Cocos Creator');
  },
});

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

如上图所示，当我们从节点 c 发送事件 “foobar”，倘若节点 a，b 均做了 “foobar” 事件的监听，则事件会经由 c 依次传递给 b，a 节点。如：

// 节点 c 的组件脚本中
this.node.dispatchEvent( new cc.Event.EventCustom('foobar', true) );

如果我们希望在 b 节点截获事件后就不再将事件传递，我们可以通过调用 event.stopPropagation() 函数来完成。具体方法如下：

// 节点 b 的组件脚本中
this.node.on('foobar', function (event) {
  event.stopPropagation();
});

请注意，在发送用户自定义事件的时候，请不要直接创建 cc.Event 对象，因为它是一个抽象类，请创建 cc.Event.EventCustom 对象来进行派发。

事件对象

在事件监听回调中，开发者会接收到一个 cc.Event 类型的事件对象 event，stopPropagation 就是 cc.Event 的标准 API，其它重要的 API 包含：

API 名	类型	意义
`type`	`String`	事件的类型（事件名）
`target`	`cc.Node`	接收到事件的原始对象
`currentTarget`	`cc.Node`	接收到事件的当前对象，事件在冒泡阶段当前对象可能与原始对象不同
`getType`	`Function`	获取事件的类型
`stopPropagation`	`Function`	停止冒泡阶段，事件将不会继续向父节点传递，当前节点的剩余监听器仍然会接收到事件
`stopPropagationImmediate`	`Function`	立即停止事件的传递，事件将不会传给父节点以及当前节点的剩余监听器
`getCurrentTarget`	`Function`	获取当前接收到事件的目标节点
`detail`	`Function`	自定义事件的信息（属于 `cc.Event.EventCustom`）
`setUserData`	`Function`	设置自定义事件的信息（属于 `cc.Event.EventCustom`）
`getUserData`	`Function`	获取自定义事件的信息（属于 `cc.Event.EventCustom`）