emitit
v0.2.0-beta
Published
Browser event emitter the node way.
Downloads
4
Maintainers
eljefederodeodeljefeReadme
emitit
For when you just want to listen to decent events and then do something...
Technical Overview
Emitit is abstraction on top of the DOMs native event-API. This feels to be necessary, because of weird-ish DOM-behaviour (Opinion). What you want to is to abstract events, listen for them and then act on them and specific data, not whole DOM-objects. Also this module guides the user gently to bind events as low as possible for performance reasons. While we are at it we can add CSS on a per node basis, forcibly preventing defaults, such as user-select.
For convenience the module can be called in a script tag without requiring or including it explicitly. This works after including the JS-file in the header of the HTML-document. This is because the node-style JS is build with browserify and attached to the global window object.
Pass in options into the constructor and be ready to listen to events.
Usage
npm install emitit
# and require it in your own browserify buildor
<!DOCTYPE html>
<html>
<head>
<script src="../dist/emitter.min.js" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div class="emitter boxes">
<div class="emitter square over">over</div>
<div class="emitter square click">click</div>
</div>
</div>
<script type="text/javascript">
// bind all target boxes through css electors
var opts = {
targets: [
// '.emitter.square', // proof that dupes will be filtered
'.emitter.square.over',
'.emitter.square.click'
],
eventNames: ['click'], //required, no default fallback
emitMessage: 'hello',
// deffered: false, // speed deferrance default: false
queryRoot: document.body,
// allowDupes: false,
// allowToggle: true,
preventDefaults: [
{ property:'user-select', value: 'none'}
],
// map: [
// {mapTarget: '.emitter.square.up', eventName: 'mouseup'},
// {mapTarget: '.emitter.square.down', eventName: 'mousedown'}
// ]
}
var emitter = new Emitter(opts);
emitter.on('hello', function() {
console.log('hello from emitter 1');
})
emitter.on('error', function() {
console.log(err);
})
emitter.emit('hello')
</script>
</body>
</html>TODOs
- Test-suite
- CI-builds