事件处理

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
  });
});