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

Groups > comp.lang.javascript > #19903

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

Show key headers only | View raw

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.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

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

csiph-web