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.