Menu
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?
505
window is the execution context and global object for that context's JavaScript. document contains the DOM, initialized by parsing HTML. screen describes the physical display's full screen.
Basically, there is no difference between using a document and a window. You can use any of those as per your preference. Some functions like a scroll and resize should be available in the window. addEventListener.
The addEventListener() method allows you to add event listeners on any HTML DOM object such as HTML elements, the HTML document, the window object, or other objects that support events, like the xmlHttpRequest object.
JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page. When the page loads, it is called an event. When the user clicks a button, that click too is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc.
(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.
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
