When should I observe Javascript events on window vs. document vs. document.body?

Question

I'm using prototype.js for my web app, and I have everything running on Chrome, Safari, and Firefox. I am now working on IE8 compatibility.

As I've been debugging in IE, I've noticed that there are Javascript events for which I have previously set an observer on the window, eg

Event.observe(window, eventType, function () {...});

(where eventType might be "dom:loaded" , "keypress" , etc.) and it works just fine in Chrome/Safari/Firefox. However, in IE the observer never fires.

In at least some cases I could get this to work on IE by instead placing the observer on something other than window , eg document (in the case of "dom:loaded" ) or document.body (in the case of "keypress" ). However, this is all trial-and-error.

Is there some more systematic way to determine where to place these observers such that the results will be cross-browser compatible?

Answer 1

(This is not a super-comprehensive answer, but it seems to work out empirically -- so hopefully these rules of thumb will be helpful to others.)

• In general, register events on document , not window . Webkit and mozilla browsers seem to be happy with either, but IE doesn't respond to most events registered on the window, so you need to use document to work with IE

• Exception: resize , and events related to loading, unloading, and opening/closing should all be set on the window.

• Exception to the first exception: dom:loaded must be set on document in IE.

• Another exception: When detecting keystrokes under Mozilla with find-as-you-type enabled, set your key event observers on the window , not the document . If you do the latter, the find-as-you-type seems to block the event.

Answer 2

The various browsers' object documentation (eg window on MSDN, document on MDC) define which events are supported on the object. You could start there.