famo.us的事件机制

Engine Events

Document events have the opportunity to first be intercepted at the Famo.us Surface upon which the event occurs, then by the on() method of the Context containing that surface, and finally as a default, the Engine itself.
事件首先被发生事件的场所事件源所截获，然后被容纳该事件源（view）的Context截获，最后被Engine截获。

Listening on Engine events is a catch-all but in most applications, you'll want to capture the events at a lower level.

<pre name="code" class="javascript">var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var mainContext = Engine.createContext();
var StateModifier = require('famous/modifiers/StateModifier');

var surface = new Surface({
  size: [undefined, 100],
  content: 'click me',
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: '#FA5C4F'
  }
});

var surface1 = new Surface({
  size: [undefined, 100],
  content: 'Context',
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: '#FA5C4F'
  }
});

var surface2 = new Surface({
  size: [undefined, 100],
  content: 'Engine',
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: '#FA5C4F'
  }
});

mainContext.add(surface);

var node=mainContext.add(new StateModifier({
  transform: Transform.translate(0, 150, 0)
}));
node.add(surface1);

 node.add(new StateModifier({
  transform: Transform.translate(0, 150, 0)
})).add(surface2);
 
surface.on('click', function() {
  surface.setProperties({
    backgroundColor: '#878785'
  });
});
Engine.on('click', function() {
  surface2.setProperties({
    backgroundColor: '#878785'
  });
});
mainContext.on('click', function() {
  surface1.setProperties({
    backgroundColor: '#878785'
  });
});

Engine Events

The Famo.us Engine runs once every animation frame and at 60 fps; that's every 16.7 ms. During that cycle, the Engine also emits certain events such as 'prerender' and 'postrender.' However, due to the frequency of these events, they should be used only when absolutely necessary.
There are other Engine events that are handy though, namely 'resize.' You can listen to the 'resize' event to make your app responsive to layout changes.

engine也会产生事件，像prerender和postrender，但是如非必要，不要监听。另外比较重要的事件就是resize。

Program Events - Event Handlers

Events are a way of moving information between program modules in a decoupled way. In Famo.us we emit, transmit, and listen to program events using Event Handler objects.
In this example, we have a simple emit and listen pattern using one event handler.

var eventHandler = new EventHandler();eventHandler  是一个事件的发送和接受器，属于“自嗨”。

surface.on('click', function() {
  eventHandler.emit('hello');
});

eventHandler.on('hello', function() {
  surface.setContent('heard hello');
});

若有多个eventhandler，假设有eventHandlerA，eventHandlerB，eventHandlerB若想相应eventHandlerA发送的事件  eventHandlerB.subscribe(eventHandlerA);或eventHandlerA.pipe(eventHandlerB);

Program Events - Views

Views are important tools in Famo.us to help keep our code organized and modularized. One way views help us do this is by providing two event handlers: an input and an output.
When you pipe into a view or subscribe from a view, you're actually piping into or subscribing from the input event handler of a view, called view._eventInput.
Conceptually, a view's input handler is the aggregation point of all the events coming into that view. The view can then decide what to do with those events by listening on it's _eventInput.
Normally, this logic lives inside a view's module code (hence the underscore before _eventInput) and you'll learn that pattern in the Timbre Menu project.

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var View = require('famous/core/View');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var mainContext = Engine.createContext();

var myView = new View();
mainContext.add(myView);

var surface = new Surface({
  size: [100, 100],
  content: 'click me',
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: '#FA5C4F'
  }
});

var surface1 = new Surface({
  size: [, 100],
  content: '2',
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: '#FA5C4F'
  }
});
myView.on('hello',function(){
  surface1.setContent('receive');
});
myView.add(surface);

var node=mainContext.add(new StateModifier({
  align:[0.5,0.5],
  origin:[0.5,0.5]
 // transform: Transform.translate(150, 100, 0)
}));
node.add(surface1);
surface.pipe(myView);
// alternatively, myView.subscribe(surface);

// normally inside view module's code
myView._eventInput.on('click', function() {
  surface.setContent('goemit');
  myView._eventOutput.emit('hello');
});