Search code examples
javascriptcross-browserprototypejsdom-events

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

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, e.g.

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, e.g. 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?

Solution

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