Laya Event

事件Event指的是由系统事先设定的、能被对象识别和响应的动作，事件是指对象对于外部动作的响应，当对方发生了某个事件，就会执行于此事件对应的代码。

事件处理机制

将事件监听器注册到事件源
外部动作触发事件源上的事件
事件源生成事件对象
触发事件监听器的事件被作为参数传入事件处理器
事件监听器调用事件处理器做出响应

HTML与JavaScript交互式通过事件驱动实现的，比如鼠标点击事件、页面滚动事件等，事件是可以被JavaScript监测到的行为，页面中每个DOM元素都可以产生某些触发JavaScript程序的事件，同时都是通过向文档中的元素添加事件监听器来订阅事件。简单来说事件就是在什么时间里执行什么样的操作，JavaScript中通过一套事件来完成某项指定的功能。在DOM2事件流中对顶了事件流包含的三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件处理机制

事件包含三要素：事件源、事件类型、事件处理器（函数），三者之间的关系是：事件源 + 事件类型 = 执行指令。从开发者的角度来看，重点在获取事件源、绑定特定类型的事件、编写事件处理函数实现特定功能。

事件处理器（Event Handler）是异步（Asynchronous）执行、处理程序或事件中输入的回调函数

LayaAir引擎中的事件主要包含三部分

Laya.Event 事件类型，事件接口，不同的事件类型都要实现此接口。
Laya.EventDispatcher 事件分发，每个传递过来的事件都会由它分发给特定的处理者。
Laya.Handler 事件处理，不同的处理器需是新该接口。

事件类型

Laya.Event是事件类型的集合，当事件发生时Laya.Event对象将作为参数传递给事件监听器。

事件类型	描述
`Laya.Event.CLICK`	单击
`Laya.Event.MOUSE_DOWN`	鼠标按下

Laya.Event.CLICK:string = "click"

CLICK静态属性用于定义事件对象的type类型属性值为单击事件

例如：点击按钮后获取其上标签后设置到指定标签的文本上

点击事件

class Test{constructor(){//初始化舞台this.initStage();//创建标签节点this.createLabel();//创建按钮节点this.createButton();}initStage(){//初始化引擎const canvas = Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);//舞台设置Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;//设置舞台水平居中Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;//设置舞台垂直居中Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;//设置舞台缩放模式为显示所有Laya.stage.bgColor = "#000000";//设置舞台背景颜色为黑色}createLabel(){let label = new Laya.Label();label.text = "文本标签";label.fontSize = 20;label.color = "#fff";label.pos((Laya.stage.width-label.width)>>1, 100);this.label = label;//向舞台添加标签节点Laya.stage.addChild(label);}createButton(){//加载资源后创建按钮节点Laya.loader.load("res/atlas/comp.atlas", Laya.Handler.create(this, this.initButton));}initButton(event){let btn = new Laya.Button("comp/button.png");btn.label = "测试按钮";btn.labelSize = 20;btn.labelColors = "#fff";btn.width = 150;btn.height = 40;btn.pos((Laya.stage.width - btn.width)>>1, (Laya.stage.height - btn.height)>>1);//向舞台中添加按钮节点Laya.stage.addChild(btn);//将舞台缓存为静态图像Laya.stage.cacheAs = "normal";//为按钮注册单击事件btn.on(Laya.Event.CLICK, this, this.onClickButton, [btn]);  }//按钮点击事件onClickButton(btn){this.label.text = btn.label;this.label.fontSize = 24;this.label.bold = true;this.label.color = "yellow";}
}
new Test();

static Laya.Event.MOUSE_DOWN:string = "mouse_down"

Laya.Event事件类型类中的MOUSE_DOWN静态属性定义了事件对象的type类型属性值为鼠标按下事件。

例如：在矩形区域内部与外边缘拖放标签文本

鼠标按下

class Test{constructor(){//初始化舞台this.initStage();//创建标签节点this.createLabel();//创建矩形节点this.createRect();}initStage(){//初始化引擎const canvas = Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);//舞台设置Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;//设置舞台水平居中Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;//设置舞台垂直居中Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;//设置舞台缩放模式为显示所有Laya.stage.bgColor = "#000000";//设置舞台背景颜色为黑色}createLabel(){let label = new Laya.Label();label.text = "标签";label.fontSize = 20;label.color = "#fff";label.pos(300, 120);Laya.stage.addChild(label);label.on(Laya.Event.MOUSE_DOWN,this,this.onLabelMouseDown);this.label = label;}onLabelMouseDown(event){this.label.startDrag(this.rect, true, 30, 100);}createRect(){const width = Laya.stage.width/3;const height = Laya.stage.height/3;const x = (Laya.stage.width - width)>>1;const y = (Laya.stage.height - height)>>1;let rect = new Laya.Rectangle();rect.x = x;rect.y = y;rect.width = width;rect.height = height;this.rect = rect;let sprite = new Laya.Sprite();sprite.graphics.drawRect(x, y, width, height, null, "#fff");Laya.stage.addChild(sprite);}
}
new Test();

事件分发

事件分发（EventDispatcher）模式是监听模式的一种扩展，由事件驱动，每当有事件产生的时候，由事件分发器（EventDispatcher）分发给特定的事件处理器（EventHandler）处理该事件。EventDispatcher表示事件发送者、事件捕获传递与分发。

Laya.EventDispatcher 事件分发器是可调度事件类的基类，比如作为基础节点的Node类继承自EventDispatcher类，只要继承此类就可以作为一个事件发送者发送事件给它的监听者。

方法	描述
`hasListener()`	用于判断事件分发器对象是否为特定类型的事件注册了监听器
`isMouseEvent()`	用于判断特定类型的事件是否为鼠标事件
`event()`	用于派发事件
`off()`	用于从事件分发器对象中删除监听器
`offAll()`	用于从事件分发器对象中删除指定事件类型的所有监听器
`on()`	用于向事件分发器注册指定类型的事件监听器
`once()`	用于向事件分发器注册指定类型的事件监听器

EventDispatcher.hasListener(type:String):Boolean

hasListener()方法用于判断事件分发器对象是否为特定类型的事件注册了监听器

EventDispather.isMouseEvent(type:string):Boolean

isMouseEvent()方法用于判断特定类型的事件是否为鼠标事件

EventDispatcher.event(type:string, data:*=null):Boolean

event()方法用于派发事件

EventDispatcher.off(type:String, caller:*, listener:Function, onceOnly:Boolean=false):EventDispather

off()方法用于从事件分发器对象中删除监听器

EventDispatcher.offAll(type:String = null):EventDispatcher

offAll()方法用于从事件分发器对象中删除指定事件类型的所有监听器

EventDispatcher.on(type:String, caller:*, listener:Function, args:Array=nulll):EventDispatcher

on()方法用于向事件分发器注册指定类型的事件监听器，使事件监听器能够接收事件通知。

EventDispatcher.once(type:String, caller:*, listener:Function, args:Array=null):EventDispatcher

once()方法用于向事件分发器注册指定类型的事件监听器，使事件监听器能够接收事件通知，事件监听器响应一次后会自动移除。

例如：对Laya.EventDispatcher事件分发器的封装

TS版本

/*** 全局事件管理器* 单例模式*/
export default class EventManager{/**事件分发器对象 */private _dispather:Laya.EventDispatcher;/**单例模式 */private static _instance:EventManager;constructor(){//初始化事件分发器对象this._dispather = new Laya.EventDispatcher();}static get instance():EventManager{if(!this._instance){this._instance = new EventManager();}return this._instance;}/**添加事件监听 */on(type:string, listener:Function, caller:any, args:Array<any>=null):void{this._dispather.on(type, caller, listener, args);}/**关闭事件监听 */off(type:string, listener:Function, caller:any, onceOnly:boolean=false):void{this._dispather.off(type, caller, listener, onceOnly);}/**执行一次后自动移除监听 */once(type:string, listener:Function, caller:any, args:Array<any>=null):void{this._dispather.once(type, caller, listener, args);}/**分发事件/抛出事件 */dispatch(type:string, data:any=null):boolean{return this._dispather.event(type, data);}
}

ES版本

/**事件管理器 */
export default class EventManager{/**单例模式 */static getInstance(...args){if(!this._instance){this._instance = new EventManager(...args);}return this._instance;}constructor(){this._dispatcher = new Laya.EventDispatcher();}/**是否具有指定类型的监听器 */has(type){return this._dispatcher.hasListener(type);}/**派发/抛出事件 */event(type, data){return this._dispatcher.event(type, data);}dispatch(type, data){return this._dispatcher.event(type, data);}/**监听事件 */on(type, caller, listener, args){this._dispatcher.on(type, caller, listener, args);}/**取消事件监听 */off(type, caller, listener, onceOnly=false){this._dispatcher.off(type, caller, listener, onceOnly);}/**移除对象上指定类型的所有监听器 */remove(type){this._dispatcher.offAll(type);}/**执行一次就自动移除的监听 */once(type, caller, listener, args){this._dispatcher.once(type, caller, listener, args);}
}

事件处理

项目	描述
Package	`laya.utils`
Class	`public class Handler`
Inheritance	`Handler / Object`

方法	描述
`clear(): Handler`	清理对象引用
`recover(): void`	清理并回收到 Handler 对象池内
`run(): any`	执行处理器
`runWith(data: any): any`	执行处理器，并携带额外数据。
`setTo()`	设置此对象的指定属性值
`create()`	从对象池内创建一个Handler

Laya.Handler 事件处理器，推荐使用Laya.Handler.create()方法从对象池创建，以减少对象创建消耗。当创建的Handler对象不再使用后，可使用Laya.Handler.recover()将其回收到对象池，回收后不要再使用此对象，否则会导致不可预料的错误。需要注意的是，由于鼠标事件也使用了对象池，不正确的回收以及调用，可能会影响事件的执行。

static create(caller:any, method:Function|null, args?:any[]|null, once?:boolean):Handler
// 使用方式
Laya.Handler.create()

create()方法用于从对象池内创建一个处理器（Handler），默认会执行一次并立即回收，如果无需自动回收，则需设置参数once为false。

参数	作用
`caller:any`	执行域`this`
`method:Function`	回调方法
`Default value args:any[]`	携带的参数
`Default value once:bool`	是否只执行一次，为`true`回调后会执行`recover()`进行回收，默认为`true`。

recover():void

recover()方法用于将处理器（Handler）清理并回收到处理器对象池内

run():void

run()方法用于执行处理器（Handler）

runWith(data:any):any

runWith()方法用于执行处理器（Handler）并携带额外数据

参数	含义
`data:any`	附加的回调数据，可以是单个数据或多个数据的数组。

Laya Event相关推荐

使用Laya引擎开发微信小游戏（下）
本文由云+社区发表 6. 动画 6.1 创建伞兵对象在src目录下创建一个新目录role,用来存放游戏中角色. 在role里创建一个伞兵Soldier.ts对象文件. module role{exp ...
Laya微信排行榜基于TypeScript脚本详细步骤
Laya 微信排行榜功能实现(ts脚本) Demo在最下面 Laya的微信排行榜分为主域和子域两个部分,主域就是游戏的包,子域是排行榜. 主域新建view场景,命名Ranking(命名随意)添加WX ...
Laya商业级3d实战-06用户输入_u3dApi集成
laya商业级3d游戏开发本节目标: 接收用户输入封装框架的使用新建目录scripts\Example 新建脚本Example01_InPut.ts export class Example01 ...
基于Laya实现ViewPager页面切换效果
前言页面切换效果,Laya提供了ViewStack组件,可以切换页面,但是效果有些生硬,可以看看官网文档提供的效果.ViewStack组件我这里提供的效果是通过手势滑动实现页面切换,同时也可以通过 ...
Laya微信小游戏开发问题汇总以及解决方案(一)
1 Laya 如何实现pageview 这样的效果? Laya官方文档提供的ViewStack组件,ViewStack 组件详解这里面详细说明了组件的使用.使用这个组件,可以达到ViewPage的效果 ...
【游戏开发实战】Unity老工程师开始搞Laya了，不想看官方文档，那就看我的教程吧（Laya2.12.0版本 | 案例 | 入门 | 教程）
文章目录一.前言二.我做的Laya案例集合工程三.LayaAir IDE下载四.Hello World工程 1.新建空项目 2.新建场景:HelloWorld.scene 3.创建一个Labe ...
基于Laya游戏引擎实现微信小游戏排行榜
我们都知道,微信小游戏和小程序目前风头十足,很多公司都逐渐增加了相关业务线来迅速推广自己的产品和抢占用户群.说到微信小游戏,就不得不提到排行榜这个功能,就目前游戏行业,似乎都离不开排行榜这个重要功能, ...
Laya Shader消融特效
说明&使用项目仅用于测试交流, 如有侵权, 请联系我删除. 引擎版本: LayaAir2.10.0 Github地址: LayaEffect clone LayaEffect项目 → 打开 ...
laya引擎学习（二、第一个界面）
接下来我们做做我们的第一个界面,启动界面.其实感觉做前端比较难的就是素材,如果在公司的话,有UI小姐姐做好了,我们只需要自己实现就行,现在是自己玩的话,还是上网找素材,不过感谢这个大佬,素材是免费的, ...

Laya Event

事件类型

事件分发

事件处理

Laya Event相关推荐

最新文章

热门文章