Enot

Enot is an EventEmitter with extended events notation, something in between backbone events and xtags events.

Usage

1. Install

If you’re going to use it in browser, please use browserify, component, duo or alike.

$ npm install enot

var enot = require('enot');

2. Use

Static API

enot.on(target, 'document click:pass(right_mouse)', callback);
enot.one(target, 'document click:pass(right_mouse)', callback);
enot.off(target, 'document click:pass(right_mouse)', callback);
enot.emit(target, 'document click:pass(right_mouse)');

Might be useful if you want to use events "externally", not touching the initial objects — e. g. HTMLElements, jQuery objects etc.

Emitter class

var Emitter = require('enot');

Create instance:

var emitter = new Emitter;
emitter.emit('something');

Mixin object:

var user = {name: 'Toby'};
Emitter(user);

user.emit('hello');

Inherit class:

var User = function(name){this.name = name};

User.prototype = Object.create(Emitter.prototype);
//or `Emitter(User.prototype);` to mixin

var user = new User('George');

user.emit('poo');

API

Enot API consists of common EventEmitter interface methods: on, off, once, emit, delegate. Methods are chainable, so you can compose lists of calls: Enot.on(target, 'click', cb).emit(target, 'click').off(target, 'click');

On

Enot.on(target?, event, callback)

Enot.on(target, events)

//simple event
Enot.on(document.querySelectorAll('.buy-button'), 'click', function(){...});

//events object
Enot.on(myPlugin, {
    'window resize, document myPlugin:update': 'update',
    'update': function(){...},
    'submit, click:on(.submit-button), keypress:pass(enter)': function(){...}
});

One

All the same arguments as on.

Off

Enot.off(target?, event, callback)

Enot.off(target?, event)

Enot.off(target)

Emit

Enot.emit(target, event, data?, bubbles?)

Fire event on the target. Optionally pass data and bubbles params. data will be accessible as event.detail in callback.

Event declaration

Basic event declaration syntax:

[target] event[:modifier][, <declaration>]

Common examples:

• click - call on click
• click:defer(100) - call 100ms after click
• click:throttle(200) - fire not more often than 200ms
• click:one - fire once
• window message - call on window gets message
• document unload - call on user is going to leave
• .bad-link click - elements matching selector click
• :root click:delegate(.bad-link) - the same as above but in a delegate way
• .element click, document keypress:pass(enter) - bind two callbacks

Modifiers

You can use the following modifiers for events:

• :one, :once — fire callback once.
• :delegate(selector) — listen for bubbled event on elements mathing selector.
• :not(selector) — the opposite to delegate - ignore bubbled event on elements matching selector.
• :pass(code) — filter event by code. Useful for keyboard/mouse events. Codes:
  • ENTER: 13
  • ESCAPE: 27
  • TAB: 9
  • ALT: 18
  • CTRL: 17
  • SHIFT: 16
  • SPACE: 32
  • PAGE_UP: 33
  • PAGE_DOWN: 34
  • END: 35
  • HOME: 36
  • LEFT: 37
  • UP: 38
  • RIGHT: 39
  • DOWN: 40
  • LEFT_MOUSE: 1
  • RIGHT_MOUSE: 3
  • MIDDLE_MOUSE:
• :defer(100) — invoke callback 100 ms after.
• :throttle(20) — invoke callbak not more than once per 20 ms.

Modifiers can be combined, e.g. click:delegate(.inner-tag):pass(right_mouse)

License

MIT