Q: How to reset onload event handler that was set to null?

[Tuxedo]

Is it possible to set the onload event handler of an image object back to
its default once it has been set to null?

For example, in the beginning of a function, which was triggered by the
onload event, the onload event handler is set to null so that various image
replacements within the function body will not retrigger the function.

The onload event handler of the object is however needed again at a
different time for some other function. Eg.:

function bla(){
document.getElementById('bla').onload=null;

// some img replacement stuff that should not retrigger another onload event
document.getElementById('bla').src='another.jpg';

document.getElementById('bla').onload ...
// how to recreate the onload event handler after?

}

<img id='bla' src=some.jpg" onload="bla();">

Can the event handler be recreated after it's been set to null?

Many thanks,
Tuxedo

[Tuxedo]

Tuxedo wrote:

[...]

Or maybe, at the beginning of the function, it's better to do:

>
> function bla(){

window.bla = function(){
return false;
}

[Tuxedo]

Tuxedo wrote:

> Tuxedo wrote:
>
> [...]
>

Or probably a better way is to assign a relevant function to the image
object's onload trigger at the end of bla(){ ... } after having set the
onload handler to null or undefined:
document.getElementById("bla").onload = function(){
some stuff
}

[JJ]

Simply assign the onload handler using the function name. e.g.:

document.getElementById('bla').onload = bla;

[JJ]

On Wed, 22 May 2013 22:36:13 +0200, Tuxedo wrote:

Image loading is asynchronous, so you'll need to use separate handler
function for the "another.jpg" image. e.g.:

function bla2(){
//put code here for after "anoter.jpg" is loaded
}

function bla(){
document.getElementById('bla').onload = bla2;
document.getElementById('bla').src='another.jpg';
}

[Christian Winter]

You can store the old event handler in a local variable and
create a closure around it which re-adds it in a temporary
onload handler.

function bla() {
var oldhandler = document.getElementById('bla').onload;

document.getElementById('bla').onload = function() {

document.getElementById('bla').onload = oldhandler;
}
document.getElementById('bla').src = 'another.jpg';
}

See http://jibbering.com/faq/notes/closures/ for details on
closures in ECMAScript.

-Chris

[Thomas 'PointedEars' Lahn]

You have not answered the question, and your code not only does not make any
sense as-is, it is potentially harmful. The “onload” event handler property
value of Image instances must be set to “null” after the event occurred, in
order to avoid infinite triggering in Opera (which is probably what the OP
wisely did; now they want to change the image resource and do it all over
again, probably for a slideshow).

The question was (in correct terminology) how to restore the event-handler
property value, the *first* event listener for an event on an object. The
correct and simple answer is that the property value is a reference to a
Function instance; you can and have to store that value first (here: in a
variable) –

var listener = foo.on…;

– then later restore it:

bar.on… = listener;

Closures would be involved here only insofar that the variable would have to
be declared in an execution context common to both functions in order to be
available in both:

var listener;

function foo ()
{
listener = …;
}

function bar ()
{
… = listener;
}

The alternatives would be a globally available property of a native object –

var myData = {};

function foo ()
{
myData.listener = …;
}

function bar ()
{
… = myData.listener;
}

– or a property of the object referred by the “this” value (which would be
useful for a slideshow object):

var slideshow = {
foo: function () {
this.listener = …;
}

bar: function () {
… = this.listener;
}
};

slideshow.foo();

…

slideshow.bar();

However, in the last two cases it is not necessary to store the event-
handler property value as the value can be available by user-defined
property in the first place – *then* understanding closures would be vital
indeed. For example:

var slideshow = {
resetListener: function () {
this.target.onload = null;
},

onload: function () {
this.resetListener();
// …
},

start: function (target) {
this.target = target;
this.next();
},

stop: function () {
this.resetListener();
window.clearTimeout(
// …
);
},

next: function () {
/* or with Function.prototype.bind() if possible */
var me = this;
this.target.onload = function () {
me.onload();
me = null;
};

window.setTimeout(
// …
);
}
};

slideshow.start(document.images["foo"]);

--
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[Christian Winter]

Am 23.05.2013 10:19, schrieb Thomas 'PointedEars' Lahn:

> Christian Winter wrote:
>
>> You can store the old event handler in a local variable and
>> create a closure around it which re-adds it in a temporary
>> onload handler.
>>
>> function bla() {
>> var oldhandler = document.getElementById('bla').onload;
>> document.getElementById('bla').onload = function() {
>> document.getElementById('bla').onload = oldhandler;
>> }
>> document.getElementById('bla').src = 'another.jpg';
>> }
>>
>> See http://jibbering.com/faq/notes/closures/ for details on
>> closures in ECMAScript.
>
> You have not answered the question

I didn't spoon-feed the absolute answer, I illustrated saving
and restoring the original handler (which I consider the main
problem). I might have been a bit misled by the example code
that changes the src attribute only once, in that case your
solutions with either a globally accessible property or an OO
approach would be preferable.

> and your code not only does not make any sense as-is

Please don't start nit-picking.

> it is potentially harmful.

-v please.

> The “onload” event handler property value of Image instances must be set
> to “null” after the event occurred, in order to avoid infinite
> triggering in Opera (which is probably what the OP wisely did; now they
> want to change the image resource and do it all over again, probably
> for a slideshow).

I haven't stumbled over that behaviour in Opera yet, and Google is
unwilling to provide me with more insight. Do you have a link handy?

-Chris

[Thomas 'PointedEars' Lahn]

Christian Winter wrote:

> Am 23.05.2013 10:19, schrieb Thomas 'PointedEars' Lahn:
>> Christian Winter wrote:
>>> You can store the old event handler in a local variable and
>>> create a closure around it which re-adds it in a temporary
>>> onload handler.
>>>
>>> function bla() {
>>> var oldhandler = document.getElementById('bla').onload;
>>> document.getElementById('bla').onload = function() {
>>> document.getElementById('bla').onload = oldhandler;
>>> }
>>> document.getElementById('bla').src = 'another.jpg';
>>> }
>>>
>>> See http://jibbering.com/faq/notes/closures/ for details on
>>> closures in ECMAScript.
>>
>> You have not answered the question
>
> I didn't spoon-feed the absolute answer, I illustrated saving
> and restoring the original handler (which I consider the main
> problem). I might have been a bit misled by the example code
> that changes the src attribute only once, in that case your
> solutions with either a globally accessible property or an OO
> approach would be preferable.

In your example you save the old event-handler property value in the *local*
variable, then overwrite the event-handler property value with a function in
which the old event-handler property value is overwritten with the saved
value. Then you change value of the “src“ property, thereby overwriting the
old value with *itself*. And you do that by retrieving the DOM object
reference repeatedly when you could have used a variable or simply “this”.

And the OP asked about how to save the value in one function and restore it
in *another*.

>> and your code not only does not make any sense as-is
>
> Please don't start nit-picking.

There is no nit to pick: your code is complete nonsense.

>> it is potentially harmful.
>
> -v please.

See below.

>> The “onload” event handler property value of Image instances must be set
> > to “null” after the event occurred, in order to avoid infinite

^^^^^^^^

> > triggering in Opera (which is probably what the OP wisely did; now they

^^^^^^^^^^

> > want to change the image resource and do it all over again, probably
> > for a slideshow).
>
> I haven't stumbled over that behaviour in Opera yet, and Google is
> unwilling to provide me with more insight. Do you have a link handy?

Granted, the behavior is known to me for animated GIFs in Opera, but it
might occur in other cases, too. IIRC it was either Martin Honnen who
pointed it out in de.comp.lang.javascript or Lasse Reichstein Nielsen who
pointed it out here; and no, I do not have a link.

[sake mera]

Greet offer Free Money From Full Service Management Inc announcement, free money online! This is how to earn money online for free! Learn how to get free card only 60 seconds. Cheek now http://www.mustinvestnow.com/
Please visit and don’t forget like....
• No credit bureau check
• No credit card debt
• No minimum balance
• No bounced checks