事件处理
skylarkjs提供一个事件驱动的UI编程模型,所以有必要熟悉skylarkjs事件处理机制。
Evented
skylarkjs.langx.Evented是一个类,可以用作发布自己的事件的skylarkjs类的基类。
介绍
事件旨在提供一个类,允许开发人员发出事件,并提供一种简单的方法来允许这些事件由下游用户连接。应该注意,这是通常被称为“合成”事件,它们与DOM事件不同。
常见的惯例是发出的事件都是小写的,通常是一个具有语义含义的单词。 例如更改中或已更改。 发送的事件的结构取决于开发人员,但它应该是一致的,易于理解。
用法
Evented类提供了两个方法:on(eventType,listener)和trigger(eventType,eventObject),其对应于eventer.on()和eventer.emit(),目标是实例对象。 例如,我们可以创建一个类:
define(["skylarkjs"], function(skylarkjs){ var MyComponent = skylarkjs.langx.Evented.inherit({ start: function(){ // once we are done with startup, fire the "started" event this.trigger("start", {}); } }); component = new MyComponent(); component.on("started", function(){ // this will be called when the "started" event is triggered // ... }); component.start(); });
eventer
skylarkjs.eventer包含DOM节点和其他事件发射对象的一些通用事件处理方法,提供规范化的事件侦听和事件调度功能。
添加事件监听器
require(["skylarkjs"], function(skylarkjs){ skylarkjs.eventer.on(target, "event", function(e){ // handle the event }); });
删除事件侦听器
require(["skylarkjs"], function(skylarkjs){ skylarkjs.eventer.off(target, "event", f); });
trigger()
trigger()方法提供了调度事件的标准化机制。 此方法将在可用时使用本地事件机制设施分派事件,否则将会模拟这些机制:
require(["skylarkjs"], function(skylarkjs){ var eventer = skylarkjs.eveter; eventer.on(target, "event", function(e){ // handle event }); eventer.trigger(target, "event", { bubbles: true, cancelable: true }); });