Git Product home page Git Product logo

eventbus's Introduction

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);

eventbus's People

Contributors

alexandernst avatar arjun024 avatar bitdeli-chef avatar klka avatar l-catallo avatar rmwxiong avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

eventbus's Issues

Removing listener during dispatch skips next listener

Hey there!

I found that removing a listener while the event for that listener is being dispatched can cause the next listener to not get called.

Example:

const EventBus = require('eventbusjs');

const listener1 = () => {
  console.log('I get logged!');
  EventBus.removeEventListener('unlock', listener1);
};

const listener2 = () => {
  console.log('I do not get logged :(');
};

EventBus.addEventListener('unlock', listener1);
EventBus.addEventListener('unlock', listener2);

EventBus.dispatch('unlock');

This is caused by removeEventListener removing from the same array that dispatch is referencing: https://github.com/krasimir/EventBus/blob/master/src/EventBus.js#L42 and https://github.com/krasimir/EventBus/blob/master/src/EventBus.js#L76.

This can be solved by slicing the listeners array before iterating over it. That way removeEventListener overriding this.listeners will not affect dispatch.

Licence ?

Hi there..
i have interest with your EventBus..
i may use your library in the future..
but i need to know the library's licence..

if you want suggestion,
MIT Licence would be the best..
LGPL would also be nice..

ps : great job on developing this library ๐Ÿ‘

Does this support async functions

Can the Eventbus handle asynchronous functions? We tried using it with an await fn() and the function did not work.

Thank you for the help!

Listener Concatenation Bug...

First, thanks for the library. I did find an issue while using it.

File: EventBus.js

Line:

listener.args = args.concat(listener.args);

Problem:

If dispatch is called multiple times the listener object will re-add the same members to its array.

Solution:

var concatArgs = args.concat(listener.args);

To keep it clean on multiple dispatches. The bug can be reproduced by creating a timeout and dispatching in timeout intervals. Output the length and data in the callback to confirm.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.