JavaScript Event tracking and management

Events play a major role in all most all the JavaScript libraries. Experimenting on the same lines, coded a simple prototype with raw JavaScript to make the basic event management and tracking easier and names it event.js.

So what does event.js do?

  • Add events to DOM elements. [Cross-Browser support]
  • Get the event type for the particular DOM element.
  • Remove a single or all events.

Here is the code for event.js

/**
  * @author  : Hemanth.HM
  * @license : GPLv3
**/

var TrackEvents = (function() {
  'use strict';

  function TrackEvents() {
    this._listeners = [];
  }

  /**
   *  @typedef {{node: !Node,
   *            type: string,
   *            listener: Function,
   *            useCapture: boolean}}
   */

  TrackEvents.prototype = {
    /**
     * Add an event listener.
     * @param {!Node} node DOM element, that needs a event handler to be attached.
     * @param {string} type The type of event.
     * @param {Function} listener The listener to add.
     * @param {boolean} useCapture invoke during the capture phase?
     */

    add: function(node, type, listener, useCapture) {
      if(!node || !type || !listener) return null;
      if(!useCapture) capture = false;
      var h = {
        node: node,
        type: type,
        listener: listener,
        useCapture: useCapture
      };
      this._listeners.push(h);
     
      /* It all boiled down to a single line : Cross Browser event handling */
      node.addEventListerner ? node.addEventListener(type, listener, useCapture) : node.attachEvent ? node.attachEvent('on'+type, listener, capture) : node['on'+type] = listener;

    },

    /**
     * Remove any specified event listeners added with this TrackEvents.
     * @param {!Node} node The DOM node to remove a listener from.
     * @param {?string} type The type of event to remove.
     */

    remove: function(node, type) {
      this._listeners = this._listeners.filter(function(h) {
        if (h.node == node && (!type || (h.type == type))) {
           TrackEvents.removeEventListener_(h);
          return false;
        }
        return true;
      });
    },

    /** Get the event type bound to that DOM element
       @param {!Node} node DOM elemet
    */

    get: function(node) {
            var k;
            this._listeners.filter(function(h) {
                if (h.node == node)
                k = h.type;
            });
            return k;
    },

    /* Remove all event listeners added with this TrackEvents.*/
    removeAll: function() {
      this._listeners.forEach(TrackEvents.removeEventListener_);
      this._listeners = [];
    }
  };

  /**
   * Remove a single event listener given it's tracker entry.  It's up to the
   * caller to ensure the entry is removed from _listeners.
   * @param {TrackEvents.Entry} h The entry describing the listener to remove.
   * @private
   */

  TrackEvents.removeEventListener_ = function(h) {
      h.node.removeEventListener ? h.node.removeEventListener(h.type, h.listener, h.useCapture) :
      h.node.detachEvent(h.type, h.listener);
      h.node['on'+h.type] = null;
  }
 
  return TrackEvents;
})();

How to use event.js?

  • Include event.js in your head, i meant the head tag.
  • Instantiate event = TrackEvents();
  • Use the event object to add, remove, remove all or to get the event for a specific DOM element.

P.S : There are always better ways of doing things, do let me know your way!

Share this