I seem to be on a roll. I’m coding and might as well be sharing some of what I’m working on while I do it. In that sense, here goes another small bit of code that I’ll be adding to jsSimple on github.
We all know how to hook up events cross-browser. We know that we have both attachEvent and addEventListener. Both have varying syntax and we’ve all written this code a million times. Let’s just make this simple. Here’s how to call this:
Event.add(element, 'click', callback, false); // .. Event.remove(element, 'click', callback, false);
The remove looks like you’re passing around the same data, so I added a return value to “add” that allows you to capture the event and pass it in as a single object to the remove function as follows:
var evt = Event.add(element, 'click', callback, false); // .. Event.remove(evt);
So, without further delay, here is the object definition:
/*!
* jsSimple v0.0.1
* www.jssimple.com
*
* Copyright (c) Tobin Titus
* Available under the BSD and MIT licenses: www.jssimple.com/license/
*/
var EventObj = function (target, type, listener, capture) {
return {
'target' : target,
'type' : type,
'listener' : listener,
'capture' : capture
};
};
var Event = (function() {
'use strict';
function add (target, type, listener, capture) {
capture = capture || false;
if (target.addEventListener) {
target.addEventListener(type, listener, capture);
} else if (target.attachEvent) {
target.attachEvent("on" + type, listener);
}
return new EventObj(target, type, listener, capture);
}
function remove(object, type, listener, capture) {
var target;
if (object && !type && !listener && !capture) {
type = object.type;
listener = object.listener;
capture = object.capture;
target = object.target;
} else {
capture = capture || false;
target = object;
}
if (target.removeEventListener) {
target.removeEventListener(type, listener, capture);
} else if (target.detachEvent) {
target.detachEvent("on" + type, listener);
}
}
return {
'add' : add,
'remove' : remove
};
}());
You can see this all in action on jsFiddle.
