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!
Recent blog posts
- watir-webdriver web inspector
- gem list to gemfile
- Packing ruby2.0 on debian.
- Made it into The Guinness Book!
- to_h in ruby 2.0
- Filter elements by pattern jQuery.
- Better HTML password fields for mobile ?
- Grayscale image when user offline
- nth-child CSS pseudo-class Christmas colors
- EventEmitter in nodejs