Question

I have been wondering this for sometime now.

If there is a function defined for body unload, and using JavaScript I do something like document.unload= function(), would the new definition of function be chained with the last one, or override it?

Is this behaviour different for browsers, or its the same across all browsers?
If different, then why?

Can someone please shed light on this?

Answer 1

If you just assign a function to the property, then you will overwrite whatever is there already.

window.foo = 1;
window.foo = 2;

Foo is now 2 and you wouldn’t expect it to be a chain of 1 then 2 if you tried to read it. Just because the browser looks at the property and tries to run a function there when an event happens doesn’t change that.

You can do something along the lines of:

window.foo = aFunction;
oldFunc = window.foo;
window.foo = function () { oldFunc(); anotherFunc(); }

But I’d recommend using addEventListener and friends. Since we have to support Internet Explorer and have to deal with multiple event models I recommend using an abstraction layer as provided by any good JS library such as YUI or jQuery.