Skip to content

Latest commit

 

History

History
131 lines (85 loc) · 4.87 KB

README.md

File metadata and controls

131 lines (85 loc) · 4.87 KB
Raw

Enot

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>]...
Parameter Description
target Regular CSS-selector (possibly extended with relative pseudos, see query-relative), document/window keyword or target property accessible via @ prefix, e.g. @firstChild.
event Event name
:pseudo Event modifier, see list of pseudos.

Pseudos

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

Pseudo Alias Description
:once :one fire callback once.
:on(selector) :delegate(selector) listen for bubbled event on elements mathing selector.
:not(selector) the opposite to delegate—ignore bubbled event on elements matching selector.
:pass(codes/keynames) :keypass(codes/keynames) filter event by code. Useful for keyboard/mouse events. Full list of codes can be found in key-name. Use as :keypass(enter, 25, 26).
:later(100) invoke callback 100 ms after.
:throttle(20) invoke callbak not more than once per 20 ms.

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)

Parameter Description
target Any object, including HTMLElement, Array etc. If omitted — global event will be registered. Can be list of targets (NodeList or Array).
event Event declaration, in simple case — event name.
callback Any function to invoke
events Object with event declarations as keys and callbacks as values. 
//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?)

Parameter Description
target Any object, including HTMLElement, Array etc. If omitted — global event will be unbound. Can be list of targets (NodeList or Array).
event Event name. If omitted - all events for the target will be unbound.
callback Any function or string previously bound. If omitted - all events for the target will be unbound.

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.

NPM