事件与用户交互

Posted 2020-12-10 jasonchow1990

1.事件消息机制

•  egret引擎中提供了与js一样的事件处理系统，并且在此基础上还提供了一个事件处理对象，通过一整套的事件处理机制，可以方便的响应用户交互输入与系统事件。
  • 事件处理的例子

public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }

    private onAddToStage(event: egret.Event) {
　　　　　　console.log(‘舞台加载完毕‘)
　　}

• • 上面的例子描述了当舞台被加载入场景时的触发事件机制。当程序侦听到有显示对象加入舞台后，创建egret.event对象来派发egret.Event。
  • 我们在类中定义了一个私有函数onAddToStage(),用于执行事件出发后的相关动作。

2.事件类

• 事件类是承载事件信息以及一些事件处理方法的对象，每个事件都有关联的事件类型。
• 事件类型以字符串的形式存储在Egret.Event.type属性中
• 常见的事件对象，有如下：
  • 触摸事件 egret.TouchEvent
  • 声音事件 egret.SoundEvent
  • 定时事件 egret.TimeEvent
  • 文本事件 egret.TextEvent
  • 网络加载状态事件 egret.HTTPStatusEvent
  • I/O错误事件 egret.IOEvent等等

3.创建侦听器

• 要想使一个对象侦听某个事件，首先要使用addEventListener方法来注册事件侦听器。

事件接受对象.addEventListener(事件类.事件类型，事件处理函数，事件处理函数的this对象);

function 事件处理函数(事件实例:事件类){
　　//响应函数中的代码
}

 1 private createGameScene() {
 2        //定义一个矢量图
 3        var circle:egret.Shape = new egret.Shape();
 4        //开始绘制图形，并且设置填充颜色
 5        circle.graphics.beginFill(0x871F78);
 6        //绘制圆形
 7        circle.graphics.drawCircle(200,200,200);
 8        //结束绘制
 9        circle.graphics.endFill();
10        //添加到显示列表中去
11        this.addChild(circle)
12        //定义一个textField文件对象
13        var msg:egret.TextField = new egret.TextField();
14        //添加到显示列表中去
15        this.addChild(msg);
16        //设置文本内容
17        msg.text=‘点击圆形图案‘
18        //设置文本的y轴距离顶部400，刚好在圆形的下方
19        msg.y=400;
20        //设置circle可被点击
21        circle.touchEnabled = true
22        //声明一个点击的次数的变量
23        var num:number = 0
24        //给circle绑定点击事件
25        circle.addEventListener(egret.TouchEvent.TOUCH_TAP,
26        function(){
27            console.log(‘有人点了我.‘);
28            //让num每点击一次，num就+1
29            num++;
30            //让msg文本显示出num值
31            msg.text = ‘图片被点击了 ‘+num.toString()+‘ 次‘;
32        },this);

4.移除侦听器

• 删除不再使用的侦听器

事件接受对象.removeEventListener(事件类.事件类型，事件处理函数，事件处理函数的this对象);

　　//解除绑定侦听器
　　circle.addEventListener(egret.TouchEvent.TOUCH_TAP,this.touchHandler,this);
　　}
　　private touchHandler(e:egret.TouchEvent){
　　var c:egret.Shape = <egret.Shape>e.target;
　　console.log(‘图案被点击了！‘)
　　c.removeEventListener(egret.TouchEvent.TOUCH_TAP,this.touchHandler,this);
　　}

• • 注意一定要确保移除侦听器的对象，已经绑定了侦听器。

if(c.hasEventListener(egret.TouchEvent.TOUCH_TAP)){
         c.removeEventListener(egret.TouchEvent.TOUCH_TAP,this.touchHandler,this);       
}

 

• • 移除显示对象也需要确定其已经在显示列表中。