事件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 | 附加的回调数据，可以是单个数据或多个数据的数组。 |
扫一扫
1980
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
