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

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

remove listener

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

Contents

  remove listener Andrew Poulos <ap_prog@hotmail.com> - 2017-01-21 14:25 +1100
    Re: remove listener Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-01-21 06:07 +0100
      Re: remove listener Andrew Poulos <ap_prog@hotmail.com> - 2017-01-21 17:37 +1100
        Re: remove listener Andrew Poulos <ap_prog@hotmail.com> - 2017-01-21 20:35 +1100
          Re: remove listener Andrew Poulos <ap_prog@hotmail.com> - 2017-01-21 20:55 +1100
            Re: remove listener Scott Sauyet <scott@sauyet.com> - 2017-01-21 19:24 +0000
            Re: remove listener Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-01-23 20:14 +0100

#32226 — remove listener

If I add listeners like this

Show.prototype.init = function() {
   var i,
       elem,
       len = this.allItemsIds.length,
       me = this;

   for (i = 0; i < len; i++) {
     elem = document.getElementById(this.allItemsIds[i]);

     elem.addEventListener("click", function(m) {
       return function() {
         me.show(m);
       };
     }(i));
   }
};

why does doing this fail to remove any of the listeners when I pass 
valid values for 'me', 'elem' and 'i'?

elem.removeEventListener("click", function(m) {
   return function() {
     me.show(m);
   };
}(i));

Is it because event handlers can't be anonymous?

Andrew Poulos

[toc] | [next] | [standalone]

#32227

Andrew Poulos wrote:

> why does doing this fail to remove any of the listeners

It does not fail; it is just ineffective.

> when I pass valid values for 'me', 'elem' and 'i'?
> 
> elem.removeEventListener("click", function(m) {
>    return function() {
>      me.show(m);
>    };
> }(i));

You are attempting to remove an event listener that was not added in the 
first place.  Each use of a function expression creates a new Function 
instance.
 
> Is it because event handlers can't be anonymous?

No.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

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

#32228

On 21/01/2017 4:07 PM, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>
>> why does doing this fail to remove any of the listeners
>
> It does not fail; it is just ineffective.
>
>> when I pass valid values for 'me', 'elem' and 'i'?
>>
>> elem.removeEventListener("click", function(m) {
>>    return function() {
>>      me.show(m);
>>    };
>> }(i));
>
> You are attempting to remove an event listener that was not added in the
> first place.  Each use of a function expression creates a new Function
> instance.

Sorry I was trying to show just the relevant bits. The 
removeEventListener code IS called some time after the event listeners 
are added.

Do you have a model I can follow/copy that adds event listeners in a 
loop and allows their removal one at a time?

Andrew Poulos

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

#32229

On 21/01/2017 5:37 PM, Andrew Poulos wrote:
> On 21/01/2017 4:07 PM, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>
>>> why does doing this fail to remove any of the listeners
>>
>> It does not fail; it is just ineffective.
>>
>>> when I pass valid values for 'me', 'elem' and 'i'?
>>>
>>> elem.removeEventListener("click", function(m) {
>>>    return function() {
>>>      me.show(m);
>>>    };
>>> }(i));
>>
>> You are attempting to remove an event listener that was not added in the
>> first place.  Each use of a function expression creates a new Function
>> instance.
>
> Sorry I was trying to show just the relevant bits. The
> removeEventListener code IS called some time after the event listeners
> are added.
>
> Do you have a model I can follow/copy that adds event listeners in a
> loop and allows their removal one at a time?

Google suggested I use bind. So I tested adding an event listener with
   elem.addEventListener("click", this.show.bind(this, i) );
which did add the event listener but the following doesn't remove it
   elem.removeEventListener("click", this.show.bind(this, i) );

How can I remove the listener if the handler is
   this.show.bind(this, i)
?

Andrew Poulos

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

#32230

On 21/01/2017 8:35 PM, Andrew Poulos wrote:

> How can I remove the listener if the handler is
>   this.show.bind(this, i)
> ?

My bad for wasting everyone's time. MDN tells me that bind creates a new 
bound function. I just stored a reference to it and used that instead.

Andrew Poulos

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

#32240

Andrew Poulos wrote:
> Andrew Poulos wrote:

>> How can I remove the listener if the handler is
>>   this.show.bind(this, i)
>> ?
> 
> My bad for wasting everyone's time. MDN tells me that bind creates a new
> bound function. 

That might be important to your overall use of the event listener, but it 
is not the crucial point in removing it.


> I just stored a reference to it and used that instead.

This is what's crucial.  And it is what Thomas Lahn was pointing out.  If 
you'd stored a reference to your original function, you could have 
removed it as well, regardless of whether you used `bind`.

  -- Scott

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

#32274

Andrew Poulos wrote:

> On 21/01/2017 8:35 PM, Andrew Poulos wrote:
>> How can I remove the listener if the handler is
>>   this.show.bind(this, i)
>> ?
> 
> My bad for wasting everyone's time. MDN tells me that bind creates a new
> bound function. I just stored a reference to it and used that instead.

That is the correct solution.  It is usually called an “event registry”.

I think it is unfortunate that, with the exception of event listeners added 
using event-handler properties, there is no built-in way without having to 
do that.  At least the built-in Map type (which allows object references as 
keys directly) introduced with ECMAScript 2015 now allows one to register 
event listeners per DOM object instead of per DOM object serialization and, 
if necessary, linear search.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [standalone]

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

csiph-web