Code Monkey home page Code Monkey logo

eventbus's Introduction

Simple ES6-ready class for managing events in JavaScript

Installation

In a browser

Download this repo and copy src/eventbus.js into your project's JavaScript asset folder. Import the class instance using ES6 module import.

import EventBus from '/your_js_assets_folder/eventbus.js';

You're ready to go.

API

EventBus.on

// @type - string
// @callback - function
// @scope - the scope where the @callback is defined
// @args - pass additional arguments as you like
EventBus.on(type, callback, scope, ...args)

EventBus.off

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

EventBus.has

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

EventBus.emit

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

EventBus.debug

For debugging purpose only, it returns the added events as a string.

console.log(EventBus.debug());

Usage

function myHandler(event) {
  console.log("myHandler type=" + event.type);
}
EventBus.on("my_event", myHandler);
EventBus.emit("my_event");

Keeping the scope

class TestClass1 {
    constructor() {
        this.className = "TestClass1";
        EventBus.on("callback_event", this.callback, this);
    }
    callback(event) {
        console.log(this.className + " / type: " + event.type + " / dispatcher: " + event.target.className);
    }
}

class TestClass2 {
    constructor() {
        this.className = "TestClass2";
    }
    dispatch() {
        EventBus.emit("callback_event", this);
    }
}

let t1 = new TestClass1();
let t2 = new TestClass2();
t2.dispatch();

Passing additional parameters

class TestClass1 {
    constructor() {
        this.className = "TestClass1";
        EventBus.on("custom_event", this.doSomething, this);
    }
    doSomething(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);
    }
}

class TestClass2 {
    constructor() {
        this.className = "TestClass2";
    }
    ready() {
        EventBus.emit("custom_event", this, "javascript events", " are really useful");
    }
}

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

t2.ready();

Using EventBus.off

To remove an event handler you have to pass the same callback instance.

This is wrong and won't work because callback functions are different functions.

EventBus.on('EXAMPLE_EVENT', function() {
    console.log('example callback');
});
EventBus.off('EXAMPLE_EVENT', function() {
    console.log('example callback');
});

This is correct. Our callback function is the same function.

var handler = function() {
    console.log('example callback');
};
EventBus.on('EXAMPLE_EVENT', handler);
EventBus.emit('EXAMPLE_EVENT');
EventBus.off('EXAMPLE_EVENT', handler);
// Not emitted since event was removed
EventBus.emit('EXAMPLE_EVENT');

Examples

To run the examples you have to start a webserver at the root of this repository.

For example the built in PHP server:

$ cd eventbus
$ php -S localhost:9999

Now, open http://localhost:9999/examples/ in your browser.

eventbus's People

Contributors

tbreuss avatar

Watchers

 avatar

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.