joneff 28

Does anyone know how "window.onchange" works?

I used this snippet

<script type="text/javascript">
window.onchange = changed;

function changed() {

but I couldn't trigger it by any means in any browser.

-- Ivan

  • I'm not sure of the answer, but I think you need to define your function _before_ assigning it to window.onchage. Paul Farnell about 10 years ago
  • For functions defined in the same SCRIPT block it's irrelevant how you order the function. Try this one: <script type="text/javascript"> test(); function test() { alert("works"); } </script> and you will see for your self. Works in FireFox 3, IE 6, 7, 8, Opera 9, Safari 3. joneff about 10 years ago
  • @joneff - "ReferenceError: test is not defined" (FF3.5) Matthew Brindley about 10 years ago

5 answers

danwellman 5600
This was chosen as the best answer

Ok, checked the mozilla DOM ref, there is a window.onchange event, however the infomration on the event is extremely sparse, event the Moz page has very little info. Similar googling of this event turns up no useful info (either unrelated stuff or people saying 'I can't seem to use this event...')

I put together a very basic test using the following code:

//update writable name property = "window test";

//get buttons
var nameButton = document.getElementById("name"),
  changeButton = document.getElementById("change");

//define button handlers
var buttonFunction = function() {
var changeFunction = function() { = "onChange test";

//add button events
nameButton.addEventListener("click", buttonFunction, true);
changeButton.addEventListener("click", changeFunction, true);

//define change handler
var changeFunc = function() {

//add onchange event listener
window.addEventListener("onchange", changeFunc, true);  

Ok, so the property is a writable property and I set it to something arbitrary at the start of the script. There are a couple of click handlers for some buttons on the page, the first one just alerts the current name of the window, the second one changes the name of the window.

When you run the page and click the first button, it alerts the name I set at the start of the script, when the second button is clicked, then the first button is clicked again, it shows that the property has been changed.

As far as I am concerned, this should constitute a valid change in the window object and should therefore show the alert associated with the onchange event, but it doesn't...

There could be several reasons for this; it appears that the onchange event has been around for a little while, it could have been an event that was listed as a 'nice to have' and was never really implemented, or it could be that it is meant to be used with XUL instead of web pages.

What is it you are trying to do using the onchange event? Perhaps it is something that could be achived using a different method, or a different technique :)

Answered about 10 years ago by danwellman
  • I wanted to have a handler that observes for DOM insertions and other changes you would normally have from Ajax. I guess I could have used delegates, if it was about attaching events, but that was not the case. Eventually I was able to find another approach, which in is pageLoad function (only called back if existing) and it kinda worked. Then I tweaked it a bit and it really worked. joneff about 10 years ago
danwellman 5600

The window object does not have a change event. See Javascript Window Object for a list of all its properties, methods and events :D

Answered about 10 years ago by danwellman
  • But that appear in the Gecko DOM reference ;) as well as other methods / properties / events not listed in the JSK. joneff about 10 years ago
Anthony 25

I'm going out on a serious limb here, but I seem to recall that iframes were considered windows within the DOM. If that is true, could this event offer some sort of XSS-safe methods for iframes. Instead of trying to traverse the iframe object, you could simply trigger events when the window changes?

Answered about 10 years ago by Anthony

There is no window.onchange event (there is a window.onchange for Gecko, apparently), did you mean to use onresize instead?

<script type="text/javascript">
function resized() {

window.onresize = resized;
Answered about 10 years ago by Matthew Brindley
joneff 28

Yes, I was reading the DMO when I came across this and I thought it might come in handy.

For instance creating notifiers, "live" (jQ live - like) events etc.

Answered about 10 years ago by joneff