Events

Bonsai supports a number of events.

To bind an event listener to a Bonsai object use the mixin’d EventEmitter methods:

new Circle(50, 50, 30).addTo(stage)
  .fill('red')
  .on('pointermove', function(e) {
    this.fill('random');
  });

Pointer Events

Bonsai’s DisplayObjects support the following pointer events:

All pointer events will include the following properties in the passed Event object which is passed to your event handlers:

Touch Events

By default, you can bind the above pointer events and they should work as you would for single-finger interactions.

For multitiple-finger interactions, you should bind to the following prefixxed events:

All multi: events will have a touchId in the passed event object, which uniquely identifies the finger across all touch sessions, so you can keep track of the fingers currently on screen. i.e.

stage.on('multi:pointerdown', function(e) {
  e.touchId; // unique identifier for the current finger
});

E.g. to track how many fingers are down, you can do the following:

var down = 0;

stage.on('multi:pointerdown', function(e) {
  ++down
  });
stage.on('multi:pointerup', function(e) {
  --down
});

 Key Events

The stage object supports key events:

All key events will include the following properties in the passed Event object which is passed to your event handlers:

E.g.

stage.on('key', function(e) {
  console.log('Key event: ' + e.keyCode);
});

Meta Events

DisplayObjects emit the following meta events: