In the "old-style" event registration model, you would typically register events by assigning functions to the onevent property of DOM elements:
elem.onclick = function() {
alert("You clicked me");
}
The problem with that approach is that you can only assign a single event handler function to any given event. All modern browsers support more advanced event registration mechanisms so you can attach multiple event listeners to any given event, though, as usual, those mechanisms vary across platforms. This recipe can be used to register and unregister event listeners in all modern browsers:
function addEventListener(instance, eventName, listener) {
var listenerFn = listener;
if (instance.addEventListener) {
instance.addEventListener(eventName, listenerFn, false);
} else if (instance.attachEvent) {
listenerFn = function() {
listener(window.event);
}
instance.attachEvent("on" + eventName, listenerFn);
} else {
throw new Error("Event registration not supported");
}
return {
instance: instance,
name: eventName,
listener: listenerFn
};
}
function removeEventListener(event) {
var instance = event.instance;
if (instance.removeEventListener) {
instance.removeEventListener(event.name, event.listener, false);
} else if (instance.detachEvent) {
instance.detachEvent("on" + event.name, event.listener);
}
}
The usage model for the functions above looks like this:
var elem = document.getElementById("elem");
var listener = addEventListener(elem, "click", function() {
alert("You clicked me!");
});
removeEventListener(listener);
While those recipes function correctly in all major browsers, Internet Explorer has a lot of memory leak bugs that are exacerbated by event registration. While the details are a bit complex (subtle interactions between function closures and COM), we can augment the recipe above with a global event deregistration function that will remove memory leaks in most applications:
var __eventListeners = [];
function addEventListener(instance, eventName, listener) {
var listenerFn = listener;
if (instance.addEventListener) {
instance.addEventListener(eventName, listenerFn, false);
} else if (instance.attachEvent) {
listenerFn = function() {
listener(window.event);
}
instance.attachEvent("on" + eventName, listenerFn);
} else {
throw new Error("Event registration not supported");
}
var event = {
instance: instance,
name: eventName,
listener: listenerFn
};
__eventListeners.push(event);
return event;
}
function removeEventListener(event) {
var instance = event.instance;
if (instance.removeEventListener) {
instance.removeEventListener(event.name, event.listener, false);
} else if (instance.detachEvent) {
instance.detachEvent("on" + event.name, event.listener);
}
for (var i = 0; i < __eventListeners.length; i++) {
if (__eventListeners[i] == event) {
__eventListeners.splice(i, 1);
break;
}
}
}
function unregisterAllEvents() {
while (__eventListeners.length > 0) {
removeEventListener(__eventListeners[0]);
}
}
The unregisterAllEvents function unregisters all events globally, which kills the references between the DOM objects and the listener functions, which generally prevents event registration memory leaks. To take advantage of the function, call it in the onunload handler for your page:
<body onunload="unregisterAllEvents()">
If your Ajax application is graphically intensive, it probably uses a lot of CSS absolute positioned elements and the CSS z-order attribute extensively. The problem with overlapping elements is that events automatically bubble up from foreground elements to background elements, so if you blindly capture events like click in background elements, you may receive them when you are not expecting them. For example, if you have a div element floating above other elements, events will automatically bubble up to background elements, often leading to your application inadvertently handling the event in both the foreground div and the background div.
If you want to prevent events from bubbling up to background elements, you can capture the event with this recipe:
function stopEvent(e) {
if (!e) e = window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
For example, to prevent the container of a link to receive a click event when the link is clicked, you would use the function above like this:
var link = document.getElementById("link");
link.onclick = stopEvent;
The snippet above will prevent the background of the link from receiving a click event, but how do you prevent the link itself from getting the click event? This recipe completely cancels an event, which, in this case, prevents the link from executing at all:
function cancelEvent(e) {
if (!e) e = window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
If you want to both cancel the event for the link (i.e., prevent a click from executing the link) and prevent the event from bubbling to background elements, you can combine the two functions like this:
var link = document.getElementById("link");
link.onclick = function(e) {
cancelEvent(e);
stopEvent(e);
}
Even with the most advanced debugging tools, every program requires a little "printf debugging": run your program, print out state as it executes, and visually verify that everything is working properly. Unfortunately, there is no built in console to print debug messages to in JavaScript, forcing many JavaScript programmers to revert to calling alert() in their code. alert is completely infeasible for a function that gets called a lot, as it halts execution until you click an OK button. This recipe creates a simple debug log window that does not halt execution:
function log(message) {
if (!log.window_ || log.window_.closed) {
var win = window.open("", null, "width=400,height=200," +
"scrollbars=yes,resizable=yes,status=no," +
"location=no,menubar=no,toolbar=no");
if (!win) return;
var doc = win.document;
doc.write("<html><head><title>Debug Log</title></head>" +
"<body></body></html>");
doc.close();
log.window_ = win;
}
var logLine = log.window_.document.createElement("div");
logLine.appendChild(log.window_.document.createTextNode(message));
log.window_.document.body.appendChild(logLine);
}
To print log messages, you just call log() within your code:
for (var i = 0; i < 10; i++) {
log("This is log message #" + i);
}
When you push your code to production, you can just replace the definition of log with an empty function so your users will not see your debug messages.
You can disable the browser context menu for an element in your DOM with the following JavaScript recipe:
function disableContextMenu(element) {
element.oncontextmenu = function() {
return false;
}
}
For example, to disable the context menu over a photo on your page, you could use:
disableContextMenu(document.getElementById("photo"));
Browsers like Firefox do not always allow web pages to disable the context menu (this option is a setting in Firefox), so this recipe will not work 100% of the time in all browsers.
Currying a function is the act of transforming a function that takes n arguments into a function that takes n - 1 arguments. Essentially, currying is the act of binding the first argument of a function to a specific value, creating a new function that takes the remaining arguments. Here's a simple example:
function add(x, y) {
return x + y;
}
// produces 7
add(3, 4);
// produces a function with x bound to 3 that takes y as an argument
var add3 = curry(add, 3);
// produces 7
add3(4);
In this example, we curry the add(x, y) function to produce the add3(y) function that always adds 3 to its only argument. While this may seem useless initially, currying is very useful in the context of Ajax callbacks. For example, say you want to add a constant amount 4 to a counter every time a button is clicked? Just curry!
button.onclick = curry(callback(this, addToTotal), 4);
Thanks to the functional parts of JavaScript and the ability to access JavaScript function arguments as an array with the arguments variable, implementing the curry function is easy, as this recipe illustrates:
function curry(method) {
var curried = [];
for (var i = 1; i < arguments.length; i++) {
curried.push(arguments[i]);
}
return function() {
var args = [];
for (var i = 0; i < curried.length; i++) {
args.push(curried[i]);
}
for (var i = 0; i < arguments.length; i++) {
args.push(arguments[i]);
}
return method.apply(null, args);
}
}
This curry function is more flexible than the formal definition of the term: you can bind as many arguments as you want when you call curry, like this example, where we bind the first two arguments of a function to produce a function that only takes one argument:
function add(x, y, z) {
return x + y + z;
}
var add3 = curry(add, 2, 1); // binds x to 2 and y to 1
add3(5); // produces 8
Doing animation with Ajax is harder than it seems.
The first most common mistake is to do all animation effects at a constant speed. For many types of effects, linear/constant speed animation looks clunky because the animation starts and stops and so abruptly. The solution is to adjust the speed of the animation based on a sinusoidal curve rather than a line so that the transition looks smoother -- basically, it should start slow and end slow and speed up in the middle.
The second most common mistake is to do all animation at a constant frame rate. Given the dramatic DOM performance differences between web browsers and operating systems, an animation with a constant number of frames can take an order of magnitude longer on some users' computers. The solution is to perform animation in a constant amount of time, adjusting the frame rate based on the performance of the user's browser.
The Transition class below is a recipe that can handle any type of animation (linear, sinusoidal, etc) with a variable frame rate:
function Transition(curve, milliseconds, callback) {
this.curve_ = curve;
this.milliseconds_ = milliseconds;
this.callback_ = callback;
this.start_ = new Date().getTime();
var me = this;
this.runCallback_ = function() {
me.run();
};
}
Transition.prototype.run = function() {
if (!this.hasNext()) return;
this.callback_(this.next());
setTimeout(this.runCallback_, 10);
}
Transition.prototype.hasNext = function() {
if (this.done_) return this.oneLeft_;
var now = new Date().getTime();
if ((now - this.start_) > this.milliseconds_) {
this.done_ = true;
this.oneLeft_ = true;
}
return true;
}
Transition.prototype.next = function() {
this.oneLeft_ = false;
var now = new Date().getTime();
var percentage = Math.min(1, (now - this.start_) / this.milliseconds_);
return this.curve_(percentage);
}
The Transition class is designed to be used with a function that defines the curve/speed of the animation. Here are sinusoidal and linear examples:
function SineCurve(percentage) {
return (1 - Math.cos(percentage * Math.PI)) / 2;
}
function LinearCurve(percentage) {
return percentage;
}
You can use one of the functions with the Transition class with the following pattern:
var transition = new Transition(SineCurve, 1000, function(percentage) {
// Move your element percentage of the way through the animation
});
transition.run();
Here is a practical example that moves text diagonally across the screen at a sinuoidal speed:
var element = document.getElementById("animated");
element.style.position = "absolute";
element.style.left = "0px";
element.style.top = "0px";
var transition = new Transition(SineCurve, 1000, function(percentage) {
var x = element.parentNode.offsetWidth - element.offsetWidth;
var y = element.parentNode.offsetHeight - element.offsetHeight;
element.style.left = Math.round(percentage * x) + "px";
element.style.top = Math.round(percentage * y) + "px";
});
transition.run();
By default, web browsers display a text selection cursor over every visible text node in the HTML DOM, and users can select, copy, and paste any text on a web page. This is not appropriate for many Ajax applications, particularly if they involve drag-and-drop functionality that interferes with the web browser's normal text selection facilities. This simple function disables text selection within a DOM node in all modern browsers:
function disableSelection(element) {
element.onselectstart = function() {
return false;
};
element.unselectable = "on";
element.style.MozUserSelect = "none";
element.style.cursor = "default";
}
You can't disable text selection with CSS alone, unfortunately, because returning false from the onselectstart event is necessary to disable selection in Internet Explorer. Changing the cursor to "default" is not necessary to disable selection, but, without it, browsers will still display the text selection cursor over the unselectable text, which is confusing to end users.
Example usage:
disableSelection(document.getElementById("text"));
JavaScript has no support for packages or modules, so namespace conflicts are rampant. In particular, as JavaScript obfuscators become prevalent, a lot of JavaScript libraries have started to look like this (an actual snippet of the Google Maps API JavaScript):
function Cb(a){a.remove();Gb(ab,a)}
Given these obfuscators choose the shortest names possible to make the size of the JavaScript as small as possible, the likelihood of a name collision when multiple APIs are included in a page is almost 100% -- after all, there are only 26 letters in the alphabet.
When you make a JavaScript library, you can make it play well with others by only exporting those symbols that are a part of your API using this simple recipe. First, concatenate all of your JavaScript source code, and surround it in a single, anonymous function:
(function() {
var privateVariable = 3;
function MyPublicClass() {
}
function MyPrivateClass() {
}
})();
This will prevent any of your symbols from being accessible to pages that include the API. Then, explicitly export the symbols that make up your API with this simple export function:
function exportSymbol(name, symbol) {
window[name] = symbol;
}
In the case of the API above, we would add this line to the end of our anonymous function:
(function() {
var privateVariable = 3;
function MyPublicClass() {
}
function MyPrivateClass() {
}
exportSymbol("MyPublicClass", MyPublicClass);
})();
Now, MyPublicClass will be accessible, but the other two symbols defined are "private" and will not interfere with the other libraries included by your API clients.
Event-handling in JavaScript is generally done with function closures and function callbacks:
function handleClick() {
alert("You clicked the button!");
}
var button = document.getElementById("button");
button.onclick = handleClick;
In object-oriented JavaScript programs, you often want to bind events to methods on an object instance rather than a global function. This recipe for callback demonstrates an easy way to accomplish that:
function callback(instance, method) {
return function() {
method.apply(instance, arguments);
}
}
callback takes the object instance as the first argument and the function/method you want to call on that object as the second argument. It takes advantage of the apply method to pass arguments from the event handling function to the callback method. Example usage:
function Adder() {
this.value = 0;
}
Adder.prototype.addOne = function() {
this.value++;
}
var adder = new Adder();
var button = document.getElementById("button");
button.onclick = callback(adder, adder.addOne);
JavaScript is not an class-based object-oriented programming language, but a prototype-based object-oriented language. There are a number of subtle and not-so-subtle differences between the two models that lead to a number of programming consequences. If you are unfamiliar with JavaScript prototypes, check out this nice discussion of the JavaScript object model in the Mozilla developer documentation.
Many JavaScript APIs, like the Google Maps API, expose a classical object hierachy using JavaScript prototypes. In JavaScript, object inheritance is acheived by copying the prototype of the superclass to the subclass, as described in the article above:
function Superclass() {
this.x = 0;
}
Superclass.prototype.add = function(amount) {
this.x += amount;
}
function Subclass() {
}
Subclass.prototype = new Superclass();
But what happens when the constructor of a superclass takes arguments? For example, say we defined Superclass above like this:
function Superclass(initialValue) {
this.x = initialValue;
}
How do we subclass Superclass now? What arguments do we provide in our inheritance line?
Subclass.prototype = new Superclass(???);
The answer is to define an inheritance helper method like this:
function inherit(subclass, superclass) {
var c = function() {};
c.prototype = superclass.prototype;
subclass.prototype = new c();
}
Then we would define Subclass like this:
function Subclass(initialValue) {
Superclass.call(this, initialValue);
}
inherit(Subclass, Superclass);
inherit works by copying the prototype of Superclass independently of the Superclass function. You can call the constructor of the superclass by using the call method, which is available for all JavaScript functions. The first argument to call is the object instance this, which ensures that this will refer to the correct instance in the body of Superclass.