事件处理
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
});
});