Javascript Madness: Introduction Jan Wolter

May 6, 2008

Introduction

In the course of the development of the Web Paint-by-Number site and various other heavy-duty Javascript applications, I've found it necessary to do a lot of experimentation with different browsers to figure out how they handle different things. The results have generally been nightmarish, with truly impressive ranges of bizarre and strange behavior.

These pages summarize my results in a few areas, mainly having to do with event handling. I wrote them up largely for my own future reference. I have found very little of this information available elsewhere on the web.

Ideally, we would be able to write single Javascript programs that would work on all browsers. In practice, this is only possible if you are willing give up a lot of functionality. Many of the features used in the Web Paint-by-Number site would have been impossible in implement without first sensing the browser type and then selecting different code to run for different browsers, or different versions of the same browser. Sad, but true.

Worse, due to bad design and shear bugginess, there are perfectly simple things that cannot be reliably done on some browsers, like identifying with certainty which key was pressed to trigger a keydown event or recognizing when the second click of a double-click occurs.

If you are a programmer trying to sort these things out, you might consider adopting one of the freely available Javascript toolkits on the web. Some of them can help insulate you from this kind of low-level headaches described in this page. Surveying such toolkits is beyond the scope of these pages, however. I recommend that you google "Javascript toolkit" and see what you find.

All the programs and code fragments that I have written for these pages can be treated as being in the public domain, free of copyright, OK to use in any way without any legal restrictions. You are encouraged to apply the information and techniques described here anywhere you find them useful without restriction. The text of the articles themselves are all copyrighted by Jan Wolter, however.

You can also take it as given that I offer all the code and information on these pages without warranty or guarantee of it's correctness or suitability for use. So don't sue me.

Contents

Mouse Events Madness in the handling of mouse events. Which events are fired when you click or double-click with the left, right or middle mouse button on various browsers. Key Events Madness in the handling of keyboard events. Which events are fired when you hit or release a key or allow it to auto-repeat in various browsers. The demented strangeness of key codes which may or may not identify which key was hit. Dynamic Script Loading A study of a method of loading additional Javascript functions on demand after the rest of the page has already been loaded. As usual, many browser incompatibilities are discovered. The Javascript Sleep Deficiency Does Javascript have some equivalent to the sleep() function that other languages use to pause execution for a bit? Yes, it can be done, but only horribly. Treacherous Type Conversions A (hopefully informative) rant about string/number type conversions in Javascript. Layout Engines and Gecko Versions Why I talk about "Gecko" instead of "Firefox" in the above notes. Which versions of Gecko are used by various browsers and a few notes on other layout engines. KISS Javascript Compression Some thoughts on compressing Javascript code. Parsing Query Strings How to read arguments from the URL in Javascript, with a long digression into the many problems with Javascript's built-in URI encoding and decoding functions.

Ill-Informed Grousing About Browsers

For years I have used this section to vent my annoyance at all these crummy browsers. While other people touted their favorite browsers, I'd grown to dislike them all for various reasons and in various degrees.

But things have changed. Browsers have actually gotten pretty good at supporting the basic needs of Javascript programmers. It's kind of astonishing.