Dispatcher

by Artem

HTML

<h1>Javascript Event Dispatcher</h1>
<p>Click the button and look below to see the received parameters</p>
<input type="button" onclick="EventDispatcher.emit('foo', {bar: 'meow'})" value="click to send foo event" />
<div id="received"></div>

CSS

#received {
  margin-top: 20px;
  border: 2px solid #eee;
  width: 220px;
  height: 70px;
  padding: 10px;
}

JavaScript

'use strict';

document.onreadystatechange = (e) {
  if (document.readyState === 'interactive') {
    window.EventDispatcher = {
      _prefix: 'on_',
      listeners: {},
      register: function(evt_name, bind, callback) {
        var _evt_name = this._prefix + evt_name;
        if (typeof this.listeners[_evt_name] == 'undefined') {
          this.listeners[_evt_name] = [];
        }
        this.listeners[_evt_name].push([bind === null ? this : bind, callback]);
      },
      emit: function(evt_name, params) {
        var _evt_name = this._prefix + evt_name;
        if (typeof this.listeners[_evt_name] != 'undefined') {
          for (var i = 0, l = this.listeners[_evt_name].length; i < l; i++) {
            this.listeners[_evt_name][i][1].call(this.listeners[_evt_name][i][0], evt_name, params);
          }
        }
      }
    };
  }
}

/** Usage **/
var Object1 = {
  listen: function(evt_name) {
    EventDispatcher.register(evt_name, this, this.callback);
  },
  callback: function(evt_name, params) {
    document.getElementById('received').innerHTML = 'evt_name: ' + evt_name + '<br />' + 'params: ' + JSON.stringify(params);
  }
}
Object1.listen('foo');