Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #19896 > unrolled thread

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

Back to article view | Back to comp.lang.javascript

Contents

  Q: How to reset onload event handler that was set to null? Tuxedo <tuxedo@mailinator.com> - 2013-05-22 22:36 +0200
    Re: Q: How to reset onload event handler that was set to null? Tuxedo <tuxedo@mailinator.com> - 2013-05-22 23:32 +0200
      Re: Q: How to reset onload event handler that was set to null? Tuxedo <tuxedo@mailinator.com> - 2013-05-23 00:12 +0200
    Re: Q: How to reset onload event handler that was set to null? JJ <duh@nah.meh> - 2013-05-23 08:47 +0700
    Re: Q: How to reset onload event handler that was set to null? Christian Winter <thepoet_nospam@arcor.de> - 2013-05-23 07:48 +0200
      Re: Q: How to reset onload event handler that was set to null? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-05-23 10:19 +0200
        Re: Q: How to reset onload event handler that was set to null? Christian Winter <thepoet_nospam@arcor.de> - 2013-05-23 18:06 +0200
          Re: Q: How to reset onload event handler that was set to null? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-05-23 18:31 +0200
    Re: Q: How to reset onload event handler that was set to null? sake mera <sakemera@gmail.com> - 2013-05-23 14:02 -0700

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

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

[toc] | [next] | [standalone]

#19897

Tuxedo wrote:

[...]

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

> 
> function bla(){

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

[toc] | [prev] | [next] | [standalone]

#19898

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
}

[toc] | [prev] | [next] | [standalone]

#19901

On Wed, 22 May 2013 22:36:13 +0200, Tuxedo wrote:
> 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();">

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';
}

[toc] | [prev] | [next] | [standalone]

#19902

Am 22.05.2013 22:36, schrieb 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?

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

[toc] | [prev] | [next] | [standalone]

#19903

Christian Winter wrote:

> Am 22.05.2013 22:36, schrieb 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?
> 
> 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, 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.

[toc] | [prev] | [next] | [standalone]

#19909

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

[toc] | [prev] | [next] | [standalone]

#19910

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.

-- 
PointedEars

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

[toc] | [prev] | [next] | [standalone]

#19912

 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

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web