Emitit NPM | npm.io

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 build

<!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

event emitter browser

@infinitebrahmanuniverse/nolb-emi @everything-registry/sub-chunk-1580 @zalastax/nolb-emi

0.2.0-beta

9 years ago