Enot

Enot

<a href="https://travis-ci.org/dfcreative/enot"><img src="https://travis-ci.org/dfcreative/enot.svg?branch=master"/></a>
<a href="https://codeclimate.com/github/dfcreative/emmy"><img src="https://codeclimate.com/github/dfcreative/emmy/badges/gpa.svg"/></a>
<img src="https://david-dm.org/dfcreative/enot.svg"/>
<img src="https://img.shields.io/badge/size-4.38kb-brightgreen.svg"/>
<a href="UNLICENSE"><img src="http://upload.wikimedia.org/wikipedia/commons/6/62/PD-icon.svg" width="20"/></a>

Enot is Emitter with humanized events notation. It is like xtags events standalone with additional pseudos.

Install

To use in browser use browserify or build.

$ npm install enot

var Emitter = require('enot');

Use

Use Enot as simple emitter with optionally extended event notation:

Emitter.on('document click:pass(rightmouse)', callback);
Emitter.emit('document click');

Enot can be used with any Emmy/component-emitter use-case.

Examples

• click - call on click
• click:later(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

Event Notation

Basic event notation syntax is:

[<target>] <event>[<:pseudo1><:pseudo2>]...

Pseudos

Use the following pseudos for events as click:<pseudo>.

Modifiers can be combined, e.g. click:once:on(.inner-tag):not(.ignore):pass(rightmouse):later(50).

API

API consists of common Emitter methods: on, off, emit, and every inherited from Emmy. Methods are chainable, so you can compose lists of calls: Enot.on(target, 'click', cb).emit(target, 'click').off(target, 'click');.

Enot.on(target(s)?, event(s)?, listener)

//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(){...}
});

Enot.off(target(s), event(s)?, listener?)

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.