event

The event plugin deals with DOM events. It looks like this:

gui.Spirit.extend({
	onready: function() {
		this.super.onready();
		this.event.add('click');
	},
	onevent: function(e) {
		this.super.onevent(e);
		if(e.type === 'click') {
			console.log('Clicked');
		}
	}
});

The chapter on callbacks attempts to explain why we do it like this. What's important here is that the arguments served to event.add follow a particular order.

this.event.add('click', this.dom.q('span'), this, true);

The arguments in order are:

1. The type of the event, like focus, mouseover or keypress.
2. The element for which to add the listener. This defaults to the spirits element. If you specify another spirit, we'll use its element.
3. The handler of the event. This defaults to the spirit, but it could be anything that implements onevent, perhaps another spirit.
4. The capture flag. It is rarely used, but it can be useful.

The event parameter

The event parameter (we've shortened it down to e in our example) is simply a DOM event of some kind. All our browsers support these things without the need for wrapper objects.

State an exception for transitionend, mouseenter, mouseleave and what else we may come up with.

Multiple listeners

You can add and remove multiple event listeners with an array or space-separated string.

this.action.add(['click', 'focus', 'blur']);
this.action.remove('click focus blur');

When adding a listener, you can setup up to automatically remove it once the event is received.

this.event.one('click'); // TODO: implement!