Q: Create unUnload event trigger outside body tag?

T

Tuxedo

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
 
D

dhtml

Tuxedo said:
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?
Click to expand...

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.
Click to expand...

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();">
Click to expand...


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?
Click to expand...

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=/uncategorized/&date=2008/01/04/&entry=Event-Notification-System

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

Garrett
 
T

Tuxedo

dhtml said:
Tuxedo said:
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?
Click to expand...

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.
Click to expand...

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();">
Click to expand...


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?
Click to expand...

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=/uncategorized/&date=2008/01/04/&entry=Event-Notification-System

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

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

Many thanks!
Tuxedo
 
T

Tuxedo

dhtml wrote:

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

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/Element.addEventListener

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Closing an overlay outside the overlay as well 1
body onload not executed 10
Trigger HTML event using WIN32OLE 0
event handler in <body> doesn't work 2
Problems with using event handlers for button and textarea input 1
How can I hide a div using an event listener on multiple checkboxes? 6
unload event more restrictive now on Safari 3.1 ? 11
How to trigger event by script 12

Members online

No members online now.
Total: 32 (members: 0, guests: 32)
Robots: 454

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top