seng-event

seng-event

Provides Classes and utilities for dispatching and listening to events.

Provides an EventDispatcher base class that adds the ability to dispatch events and attach handlers that should be called when such events are triggered. New event classes can be created by extending the AbstractEvent class provided in this module. This module also provides basic event classes BasicEvent and CommonEvent that are ready to be used with EventDispatcher.

seng-event also supports event capturing and bubbling phases, heavily inspired by existing event dispatching systems like the functionality described in the DOM Event W3 spec

Installation

yarn / npm

yarn add seng-event

npm i -S seng-event

other

We also have browser, amd, commonjs, umd, systemjs and es6 versions of this module available attached to the Github Releases.

Basic usage

import EventDispatcher, {AbstractEvent} from 'seng-event';
import {generateEventTypes, EVENT_TYPE_PLACEHOLDER} from 'seng-event/lib/util/eventTypeUtils';

// extend EventDispatcher
class Foo extends EventDispatcher {
  ...
}

// Create your own event class
class FooEvent extends AbstractEvent {
   ...
   public static COMPLETE:string = EVENT_TYPE_PLACEHOLDER;
   ...
}
generateEventTypes({FooEvent});

// listener for events
const foo = new Foo();
const exampleHandler = (event:FooEvent) => 
{
  console.log('Handler called!', event.type, event.target);
}
foo.addEventListener(FooEvent.COMPLETE, exampleHandler);

// dispatch an event (will execute exampleHandler and log 'Handler called!')
foo.dispatchEvent(new FooEvent(FooEvent.COMPLETE));  

Documentation

View the generated documentation.

Building

In order to build seng-event, ensure that you have Git and Node.js installed.

Clone a copy of the repo:

git clone https://github.com/mediamonks/seng-event.git

Change to the seng-event directory:

cd seng-event

Install dev dependencies:

yarn

Use one of the following main scripts:

yarn build           # build this project
yarn dev             # run dev-watch mode, serving example/index.html in the browser
yarn generate        # generate all artifacts (compiles ts, webpack, docs and coverage)
yarn typings         # install .d.ts dependencies (done on install)
yarn test:unit       # run the unit tests
yarn validate        # runs validation scripts, including test, lint and coverage check
yarn lint            # run tslint on this project
yarn doc             # generate typedoc documentation

When installing this module, it adds a pre-push hook, that runs the validate script before committing, so you can be sure that everything checks out.

Contribute

View CONTRIBUTING.md

Changelog

View CHANGELOG.md

Authors

View AUTHORS.md

LICENSE

MIT © MediaMonks