Q: Create unUnload event trigger outside body tag?

#1 09-04-2008, 04:33 PM

Is it possible to add a function call to the onUnload event handler from an
external js file, or can this only be done via the body tag?

In any case, I presume there can only exist one onUnload event handler,
which can naturally include any number of function calls.

I have instances of html pages, with an existing onUnload event handlers
and those without.

I'd like to cover both instances, if possible, so that if there is an
onUnload call already defined in the body tag, to attach or add a function
to that existing event handler, while if there is none, create the onUnload
event handler via a js file, along with some function it should launch.

In other words, if 'page1.html' already contains ..
<body onUnload="some_function()">
... while if 'page2.html' contains only <body> without an onUnload call, and
if both pages shares a one and same external 'include.js' file with
some_other_function(); to be called onUnload, can: 1) the result for
page1.html be made to do the same as if the following was hardcoded in the
body tag:
<body onUnload="some_function();some_other_function();">

But in case of page2.html, the result would be the same as if this alone
was in the body tag:
<body onUnload="some_other_function();">

I guess this would be a kind of dymanic event handler and function
depending on whether or not the onOnload handler exists in the body tag
already before. Is this at all possible?

Thanks,
Tuxedo

#2 09-04-2008, 07:41 PM

Tuxedo wrote:
> Is it possible to add a function call to the onUnload event handler from an
> external js file, or can this only be done via the body tag?
>

You can use window.onunload:

window.onunload = rainbow;

function rainbow() {
confirm("Do you like Ritcie Blackmore?");
}

> In any case, I presume there can only exist one onUnload event handler,
> which can naturally include any number of function calls.
>

Yes, but you could also use addEventListener and attachEvent

addEventListener('unload', rainbow, true);

You can detect this with:-

if(window.attachEvent) {
attachEvent("onunload", rainbow);
} else if(window.addEventListener) {
attachEvent("unload", rainbow, true);
}

> I have instances of html pages, with an existing onUnload event handlers
> and those without.
>
> I'd like to cover both instances, if possible, so that if there is an
> onUnload call already defined in the body tag, to attach or add a function
> to that existing event handler, while if there is none, create the onUnload
> event handler via a js file, along with some function it should launch.
>
> In other words, if 'page1.html' already contains ..
> <body onUnload="some_function()">
> .. while if 'page2.html' contains only <body> without an onUnload call, and
> if both pages shares a one and same external 'include.js' file with
> some_other_function(); to be called onUnload, can: 1) the result for
> page1.html be made to do the same as if the following was hardcoded in the
> body tag:
> <body onUnload="some_function();some_other_function();">
>

You could use an Event Registry to add/remove legacy onunload handler.

It would be simpler to use attachEvent/ addEventListener pair.

> But in case of page2.html, the result would be the same as if this alone
> was in the body tag:
> <body onUnload="some_other_function();">
>
> I guess this would be a kind of dymanic event handler and function
> depending on whether or not the onOnload handler exists in the body tag
> already before. Is this at all possible?
>

That's what an Event Registry would handle. An Event Registry leverages
the fact that functions are objects that can be passed around. Like:-

var oldeventhandler = obj[type];
obj[type] = function(e) {
oldeventhandler(obj, e);
newhandler.call(obj, e);
};

- but a Registry would keep the object's event handlers in an array.
There is a wrapper that has the object, an event type, and a callstack.
The wrapper adds a callback to the object for that event type (obj[type]
= fireEvent());.

fireEvent is a function that returns a function. It does this to take
advantage of enclosing scope.

I wrote an article about that very subject here:-
http://dhtmlkitchen.com/?category=/u...ication-System

But for your case, you might not need all that, in which case a simple
attachEvent/addEventListener pair would work.

Garrett

> Thanks,
> Tuxedo

#3 09-05-2008, 03:48 AM

dhtml wrote:

> Tuxedo wrote:
> > Is it possible to add a function call to the onUnload event handler from
> > an external js file, or can this only be done via the body tag?
> >
>
> You can use window.onunload:
>
> window.onunload = rainbow;
>
> function rainbow() {
> confirm("Do you like Ritcie Blackmore?");
> }
>
>
> > In any case, I presume there can only exist one onUnload event handler,
> > which can naturally include any number of function calls.
> >
>
> Yes, but you could also use addEventListener and attachEvent
>
> addEventListener('unload', rainbow, true);
>
> You can detect this with:-
>
> if(window.attachEvent) {
> attachEvent("onunload", rainbow);
> } else if(window.addEventListener) {
> attachEvent("unload", rainbow, true);
> }
>
> > I have instances of html pages, with an existing onUnload event handlers
> > and those without.
> >
> > I'd like to cover both instances, if possible, so that if there is an
> > onUnload call already defined in the body tag, to attach or add a
> > function to that existing event handler, while if there is none, create
> > the onUnload event handler via a js file, along with some function it
> > should launch.
> >
> > In other words, if 'page1.html' already contains ..
> > <body onUnload="some_function()">
> > .. while if 'page2.html' contains only <body> without an onUnload call,
> > and if both pages shares a one and same external 'include.js' file with
> > some_other_function(); to be called onUnload, can: 1) the result for
> > page1.html be made to do the same as if the following was hardcoded in
> > the body tag:
> > <body onUnload="some_function();some_other_function();">
> >
>
>
> You could use an Event Registry to add/remove legacy onunload handler.
>
> It would be simpler to use attachEvent/ addEventListener pair.
>
> > But in case of page2.html, the result would be the same as if this alone
> > was in the body tag:
> > <body onUnload="some_other_function();">
> >
> > I guess this would be a kind of dymanic event handler and function
> > depending on whether or not the onOnload handler exists in the body tag
> > already before. Is this at all possible?
> >
>
> That's what an Event Registry would handle. An Event Registry leverages
> the fact that functions are objects that can be passed around. Like:-
>
> var oldeventhandler = obj[type];
> obj[type] = function(e) {
> oldeventhandler(obj, e);
> newhandler.call(obj, e);
> };
>
>
> - but a Registry would keep the object's event handlers in an array.
> There is a wrapper that has the object, an event type, and a callstack.
> The wrapper adds a callback to the object for that event type (obj[type]
> = fireEvent());.
>
> fireEvent is a function that returns a function. It does this to take
> advantage of enclosing scope.
>
> I wrote an article about that very subject here:-
>
http://dhtmlkitchen.com/?category=/u...ication-System
>
> But for your case, you might not need all that, in which case a simple
> attachEvent/addEventListener pair would work.
>

I will check out attachEvent, addEventListener and fireEvent as well as
your article on the event notification system.

Many thanks!
Tuxedo

#4 09-07-2008, 09:17 AM

dhtml wrote:

[...]

> But for your case, you might not need all that, in which case a simple
> attachEvent/addEventListener pair would work.

True, no need for major plug-in type libraries in this case.

At first I didn't realise attachEvent was for IE and addEventListener for
the better breed of browsers.

Anyway, all works in that if an onUnload call is present in the body tag
already, when the page unload event takes place, the attachEvent or
addEventListener will not overwrite any existing body call function, which
is exactly what I was looking for. For example:

<body onUnload="alert('hello from body tag')">

<script>
function rainbow(){
if (window.attachEvent){
alert('browser with window.attachEvent')
}
else if (window.addEventListener){
alert('browser with window.addEventListener')
}
}
/* run on IE 6, 7 etc. */
if(window.attachEvent){
attachEvent("onunload", rainbow)
}
/* or this for standard browsers */
else if(window.addEventListener){
addEventListener('unload', rainbow, true)
}
</script>

However, I don't understand whether to use true or false in the third
argument of the addEventListener function.

With the mozilla/firefox based browsers I'm testing the above example on
the effect is the same whether true or false, and although I find it
described on the following page I don't understand it:
http://developer.mozilla.org/En/DOM/...dEventListener

Does anyone have a simple example whereby true or false is relevant in
addEventListener? I guess it makes no difference on IE and with attachEvent
since the argument does not appear to exist.

Thanks for any tips!
Tuxedo

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode