• Stars
    star
    429
  • Rank 97,290 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 13 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Simple JavaScript class for managing events

Simple JavaScript class for managing events in JavaScript

Installation

In a browser

Download eventbus.min.js and add it to your page.

In Node

npm i eventbusjs -S

And then in your code:

var EventBus = require('eventbusjs');

API

addEventListener

// @type - string
// @callback - function
// @scope - the scope where the @callback is defined
EventBus.addEventListener(type, callback, scope)

removeEventListener

// @type - string
// @callback - function
// @scope - the scope where the @callback is defined
EventBus.removeEventListener(type, callback, scope)

hasEventListener

// @type - string
// @callback - function
// @scope - the scope where the @callback is defined
EventBus.hasEventListener(type, callback, scope)

dispatch

// @type - string
// @target - the caller
// @args - pass as many arguments as you want
EventBus.dispatch(type, target, args ...)

getEvents

For debugging purpose, it prints out the added listeners.

EventBus.getEvents()

Usage

function myFunction(event) {
  console.log("myFunction type=" + event.type);
}
EventBus.addEventListener("my_function_event", myFunction);
EventBus.dispatch("my_function_event");

Keeping the scope

var TestClass1 = function() {
  this.className = "TestClass1";
  this.callback = function(event) {
    console.log(this.className + " = type:" + event.type + " / dispatcher:" + event.target.className);
  }
};
var TestClass2 = function() {
  this.className = "TestClass2";
  this.dispatchOurEvent = function() {
    EventBus.dispatch("callback_event", this);
  }
};
var t1 = new TestClass1();
var t2 = new TestClass2();
EventBus.addEventListener("callback_event", t1.callback, t1);
t2.dispatchOurEvent();

Passing additional parameters

var TestClass1 = function() {
  this.className = "TestClass1";
  this.doSomething = function(event, param1, param2) {
    console.log(this.className + ".doSomething");
    console.log("type=" + event.type);
    console.log("params=" + param1 + param2);
    console.log("coming from=" + event.target.className);
  }
};
var TestClass2 = function() {
  this.className = "TestClass2";
  this.ready = function() {
    EventBus.dispatch("custom_event", this, "javascript events", " are really useful");
  }
};

var t1 = new TestClass1();
var t2 = new TestClass2();

EventBus.addEventListener("custom_event", t1.doSomething, t1);
t2.ready();

Example of usage EventBus.removeEventListener

To remove EventListener you have to pass same instance of callback

/* Wrong - callback functions are different instances */
EventBus.addEventListener('EXAMPLE_EVENT', function() {
    console.log('example callback');
});
EventBus.removeEventListener('EXAMPLE_EVENT', function() {
    console.log('example callback');
});

/* Correct - callback function is the same instance */
var handler = function() {
    console.log('example callback');
};
EventBus.addEventListener('EXAMPLE_EVENT', handler);
EventBus.removeEventListener('EXAMPLE_EVENT', handler);

More Repositories

1

react-in-patterns

A free book that talks about design patterns/techniques used while developing with React.
JavaScript
12,927
star
2

navigo

A simple vanilla JavaScript router.
TypeScript
2,681
star
3

deb.js

Minimalistic JavaScript library for debugging in the browser
JavaScript
1,431
star
4

absurd

A JavaScript library with superpowers
JavaScript
1,380
star
5

webpack-library-starter

Webpack based boilerplate for producing libraries (Input: ES6, Output: universal library)
JavaScript
1,363
star
6

cssx

CSS in JavaScript
JavaScript
1,008
star
7

gifffer

A tiny JavaScript library that prevents the autoplaying of the animated Gifs
JavaScript
768
star
8

stent

Stent is combining the ideas of redux with the concept of state machines
JavaScript
690
star
9

kuker

Kick-ass browser extension to debug your apps
JavaScript
657
star
10

lsbridge

Using local storage as a communication channel
JavaScript
466
star
11

react-webpack-starter

A template for writing React based ES6 app using webpack
JavaScript
338
star
12

coloor

Image preloading utility
JavaScript
332
star
13

octomments

A small library that offers GitHub issues as comments for your site/blog
JavaScript
285
star
14

yez

Chrome extension that acts as terminal and task runner
CSS
270
star
15

techy

A flat file CMS based on Gulp and AbsurdJS
CSS
248
star
16

atomus

A small utility library for running client-side tests in Node.js environment
JavaScript
243
star
17

demoit

The FE behind poet.codes
JavaScript
175
star
18

hopa

Zero config CLI for running JavaScript/TypeScript files
JavaScript
137
star
19

bubble.js

Pleasing the DOM event handling
JavaScript
120
star
20

react-place

React geo location component based on Google Maps
JavaScript
117
star
21

fluxiny

~1K implementation of flux architecture
JavaScript
78
star
22

organic-css

Micro CSS framework based on Organic concept
CSS
77
star
23

gitfred

In-memory git-like interface for managing content
JavaScript
76
star
24

evala

Clock, Weather, Terminal ... Π΅Π²Π°Π»Π° :)
CSS
72
star
25

beginning

Webpack/Babel/TypeScript/React/ESLint startup kit
JavaScript
69
star
26

react-cssx

CSS in React
JavaScript
66
star
27

octolife

Small project that shows your life in GitHub
JavaScript
59
star
28

css-steal

Given DOM element returns styles applied to it and all its children.
JavaScript
57
star
29

miss-piggy

Test runner for Puppeteer
JavaScript
48
star
30

now-lambda-runner

A tool for locally testing now lambdas
JavaScript
47
star
31

php-dependency-injection

PHP Dependency Injection
PHP
38
star
32

igit

An app for managing GitHub pull requests
JavaScript
36
star
33

layout-architect

A small utility for building layouts written in vanilla JavaScript
JavaScript
36
star
34

simpre

HTML presentation framework
JavaScript
33
star
35

auxilio

Extension for Google Chrome
JavaScript
32
star
36

blog-posts

Source files of the articles published on krasimirtsonev.com
JavaScript
30
star
37

banica

Handle async processes like a boss. Implementation of the command pattern using generators. Or in other words a redux-saga but without the Redux bit.
JavaScript
27
star
38

react-bare-minimum

A bare minimum setup to work with react. Compiling and bundling, nothing else.
JavaScript
25
star
39

riew

Riew is a reactive library that uses CSP concepts for managing data and application flow.
JavaScript
24
star
40

techy-simple-blog

An example of Techy (http://krasimir.github.io/techy/) based blog
CSS
23
star
41

jolly-roger

A micro-framework on top of React hooks
JavaScript
20
star
42

assets-pack

Clever packing of .css, .less, .js files
JavaScript
20
star
43

chain

Sequencing function calls in JavaScript
JavaScript
18
star
44

hocbox

A collection of HOC React components
HTML
14
star
45

pairify

Finds balanced matches.
JavaScript
14
star
46

view-source

An Express.js middleware/handler to render source code
JavaScript
14
star
47

third-party-react-widget

A React based example of non-iframe widget
JavaScript
13
star
48

bit.js

A set of utility functions for JavaScript functions
JavaScript
12
star
49

kuker-emitters

Pluggable modules that send events to Kuker (https://github.com/krasimir/kuker)
JavaScript
12
star
50

navigo-react

Navigo for React
JavaScript
12
star
51

coloor-loader

Webpack loader for Coloor (image preloading utility)
JavaScript
11
star
52

grunt-absurd

Grunt plugin for AbsurdJS compilation
JavaScript
10
star
53

gulp-absurd

A Gulp plugin for AbsurdJS
JavaScript
9
star
54

code-inspector

Static analysis of your code.
TypeScript
9
star
55

iloveweb

JavaScript
8
star
56

mycoil

A 2Kb lib mimicking Facebook's Recoil
JavaScript
7
star
57

to-all-devs-out-there

A collection of good practices
7
star
58

react-redux-server-side

An example of server-side rendered React/Redux app.
JavaScript
6
star
59

gulp-coloor

Gulp plugin for Coloor (image preloading utility)
HTML
6
star
60

carboscope

A small JavaScript library to measure the carbon footprint of a web page
JavaScript
6
star
61

eslint-plugin-cssx

CSSX plugin for ESLint
JavaScript
6
star
62

covid-19-stats

Covid-19 Statistics and API
TypeScript
5
star
63

absurdjs.com

The official site of AbsurdJS
HTML
5
star
64

TheBugFixManifesto

The right way of fixing software (and not only) bugs
CSS
5
star
65

babylon-plugin-cssx

CSSX plugin to Babylon so it understands CSS in JavaScript
JavaScript
5
star
66

php-deployer

Simple deployment manager of SVN or GIT based projects
PHP
5
star
67

q2m

A query object to MongoDB query
JavaScript
5
star
68

hackerify

Stubbing Browserify modules
JavaScript
4
star
69

fabrico

PHP Micro Framework
PHP
4
star
70

type-commander

Programmable typing animation
JavaScript
4
star
71

city-autocomplete

A prototype using Google Maps API providing city name predictions based on a user input
HTML
4
star
72

actml

ActML is a library that allows you to use React's JSX syntax for writing business logic.
JavaScript
3
star
73

react-custom-renderer-experiment

Experimenting with React custom rendering
JavaScript
3
star
74

daily-stoic

Stoic quotes
JavaScript
3
star
75

gcpress

A free CMS based on Google Cloud Platform
TypeScript
3
star
76

cssmell

An instrument that helps you find the code smells in your CSS
CSS
3
star
77

who-want-to-be-a-millionaire

"Who want to be a millionaire" JavaScript app
JavaScript
3
star
78

kalia

VSCode color theme / extension
TypeScript
3
star
79

poet.codes.feedback

Feedback for http://poet.krasimir.now.sh/
3
star
80

queue

Short JavaScript implementation of queue
JavaScript
3
star
81

textarea.js

A micro library for enhancing <textarea> element
2
star
82

iframe-to-host-page

An example of iframe to/from host page communication
JavaScript
2
star
83

less-compiler

Watch and compile your .less files automatically
JavaScript
2
star
84

daskalo-code-samples

The code behind the exercises at daskalo.dev
JavaScript
2
star
85

prototyper

Helpful tool for building responsive design html prototypes
2
star
86

auxilio-backend

The server responding on auxilio chrome extension
JavaScript
2
star
87

hazard

Producing UI with CSS in JavaScript! The next because-we-can thing πŸ‘Ή
JavaScript
2
star
88

AS3Helpers

Helper classes for ActionScript3 based applications
ActionScript
2
star
89

animo-project

javascript framework for animations
JavaScript
2
star
90

shape-drawer

Little web app that draws shapes on a page based on a user's commands
JavaScript
2
star
91

code-inspector-playground

CodeInspector playground
JavaScript
2
star
92

php-differ

Showing differences between two mysql databases
PHP
2
star
93

varnajs-typescript

A project used at VarnaJS meetup (Talk: TypeScript)
JavaScript
2
star
94

admin-ui

PHP based micro administration
JavaScript
2
star
95

react-disco

A step by step implementation of React
JavaScript
2
star
96

syncher

Node.js module for updating dependencies
JavaScript
2
star
97

debounce

Dart package for exactly what you are thinking about - debouncing a function call.
Dart
2
star
98

animo

Dart/Flutter package for animation
Dart
1
star
99

Note.It

Simple AIR based notebook (notes, time tracking, pomodoro timer)
ActionScript
1
star
100

anatomia

Smart JavaScript analyzer
JavaScript
1
star