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

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

removing event listener

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

Contents

  removing event listener Andrew Poulos <ap_prog@hotmail.com> - 2021-10-11 10:37 +1100
    Re: removing event listener Ben Bacarisse <ben.usenet@bsb.me.uk> - 2021-10-11 16:42 +0100
      Re: removing event listener Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-10-12 22:43 +0200
    Re: removing event listener Julio Di Egidio <julio@diegidio.name> - 2021-10-11 09:46 -0700
      Re: removing event listener JJ <jj4public@gmail.com> - 2021-10-12 22:21 +0700
        Re: removing event listener Julio Di Egidio <julio@diegidio.name> - 2021-10-12 09:57 -0700
      Re: removing event listener John Harris <niam@jghnorth.org.uk.invalid> - 2021-10-12 18:13 +0100
        Re: removing event listener Julio Di Egidio <julio@diegidio.name> - 2021-10-12 16:05 -0700
          Re: removing event listener John Harris <niam@jghnorth.org.uk.invalid> - 2021-10-13 18:10 +0100
      Re: removing event listener John Harris <niam@jghnorth.org.uk.invalid> - 2021-10-12 18:15 +0100
    Re: removing event listener Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-10-12 22:55 +0200

#40457 — removing event listener

I Have this

Interaction = function() {
  ...
};

Interaction.prototype.action = function() {
   let me = this;
   ...
   document.addEventListener('keydown', me.action.bind(me));
};

Interaction.prototype.reaction = function() {
   let me = this;
   ...
   document.removeEventListener('keydown', me.action.bind(me));
};

but when 'reaction' gets called the 'keydown' event listener doesn't get 
removed. How can I remove the event listener within 'reaction'?

Andrew Poulos

[toc] | [next] | [standalone]

#40458

Andrew Poulos <ap_prog@hotmail.com> writes:

> I Have this
>
> Interaction = function() {
>  ...
> };
>
> Interaction.prototype.action = function() {
>   let me = this;
>   ...
>   document.addEventListener('keydown', me.action.bind(me));
> };
>
> Interaction.prototype.reaction = function() {
>   let me = this;
>   ...
>   document.removeEventListener('keydown', me.action.bind(me));
> };
>
> but when 'reaction' gets called the 'keydown' event listener doesn't
> get removed. How can I remove the event listener within 'reaction'?

bind creates a new anonymous function but you can only remove an event
function by passing in the exact same function you passed when calling
addEventListener.  You'll have to store that function value somewhere.

-- 
Ben.

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

#40464

Ben Bacarisse wrote:

> bind creates a new anonymous function but you can only remove an event
> function by passing in the exact same function you passed when calling
> addEventListener.  You'll have to store that function value somewhere.

The _reference to_ that Function _instance_ (object).

-- 
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]

#40459

On Monday, 11 October 2021 at 14:07:33 UTC+2, Andrew Poulos wrote:

> Interaction.prototype.action = function() { 
>     let me = this; 
>     ... 
>     document.addEventListener('keydown', me.action.bind(me)); 
> }; 

Calling itself?  You sure it is not that the problem?

Also, directly 'this' instead of 'me' would work fine in that case.

Also, Ben is incorrect: the match must be lexical, not by reference (JS is a functional language...).

Julio

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

#40460

On Mon, 11 Oct 2021 09:46:31 -0700 (PDT), Julio Di Egidio wrote:
> 
> Also, Ben is incorrect: the match must be lexical, not by reference (JS is
> a functional language...).

No. Ben is correct.

As long any of the argument is different when passed to 
`removeEventListener()` than when passed to `addEventListener()` (i.e. not 
exact match of argument set), the event handler will never be removed.

The only exception is when the third argument (the options) is an object 
when adding an event listener. The object reference doesn't need to match 
when the event listener is to be removed.

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

#40461

On Tuesday, 12 October 2021 at 17:22:00 UTC+2, JJ wrote:
> On Mon, 11 Oct 2021 09:46:31 -0700 (PDT), Julio Di Egidio wrote: 
> > 
> > Also, Ben is incorrect: the match must be lexical, not by reference (JS is 
> > a functional language...).
> 
> No. Ben is correct. 

No, he wasn't, what I said is precise (about the thing and about what was said): while you are simply being a super sloppy trolling ass.

Usenet is a shithole...

*Plonk*

Julio

> As long any of the argument is different when passed to 
> `removeEventListener()` than when passed to `addEventListener()` (i.e. not 
> exact match of argument set), the event handler will never be removed. 
> 
> The only exception is when the third argument (the options) is an object 
> when adding an event listener. The object reference doesn't need to match 
> when the event listener is to be removed.

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

#40462

On 11/10/2021 17:46, Julio Di Egidio wrote:

   <snip>
> (JS is a functional language...).

The ECMAScript standard, ECMA-262 11th Edition/June 2020, doesn't say 
that, so you can't rely on that to tell you the way a program will work.

   John

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

#40466

On Tuesday, 12 October 2021 at 19:13:39 UTC+2, John Harris wrote:
> On 11/10/2021 17:46, Julio Di Egidio wrote: 
> 
> <snip>
> > (JS is a functional language...).
> The ECMAScript standard, ECMA-262 11th Edition/June 2020, doesn't say 
> that, so you can't rely on that to tell you the way a program will work.

The case in point was "the match must be lexical, not by reference", which of course you can't even parse even less understand the import of, and which of course is the thing that is documented, just not in those high-level words.

Indeed, I might put together, maybe in the w-e, a little example with "lexical matching": not for you obnoxious asshole, but others around here might even learn something, what what I said means to begin with...

(EOD.)

Julio

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

#40467

On 13/10/2021 00:05, Julio Di Egidio wrote:
> On Tuesday, 12 October 2021 at 19:13:39 UTC+2, John Harris wrote:
>> On 11/10/2021 17:46, Julio Di Egidio wrote:
>>
>> <snip>
>>> (JS is a functional language...).
>> The ECMAScript standard, ECMA-262 11th Edition/June 2020, doesn't say
>> that, so you can't rely on that to tell you the way a program will work.
> 
> The case in point was "the match must be lexical, not by reference", which of course you can't even parse even less understand the import of, and which of course is the thing that is documented, just not in those high-level words.
   <snip>

I'm glad to see you agree with me.

   John

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

#40463

On 11/10/2021 17:46, Julio Di Egidio wrote:

   <snip>> (JS is a functional language...).

The ECMAScript standard, ECMA-262 11th Edition/June 2020, doesn't say 
that, so you can't rely on that to tell you the way a program will work.

   John

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

#40465

Andrew Poulos wrote:

> Interaction = function() {

This should be

  let Interaction = function () {

>   ...
> };
> 
> Interaction.prototype.action = function() {
>    let me = this;

This workaround is not necessary if you are using Function.prototype.bind() 
anyway, although referring to the “this” value by “me” instead of “this” 
might be more efficient.

>    ...
>    document.addEventListener('keydown', me.action.bind(me));

Change this line to

  let keyDown = me.keyDown = me.action.bind(me);
  document.addEventListener('keydown', keyDown);

or something similar,

> };
> 
> Interaction.prototype.reaction = function() {
>    let me = this;
>    ...
>    document.removeEventListener('keydown', me.action.bind(me));

and this line to

  document.removeEventListener('keydown', me.keyDown);

respectively.

You should consider whether the document object really is the right object 
to listen to the event, or if, for example, the object referred to by 
“document.body” is more appropriate.  In general, you should add event 
listeners for bubbling events as deep in the DOM tree as is feasible,
to avoid unwanted side effects.

> };
> 
> but when 'reaction' gets called the 'keydown' event listener doesn't get
> removed. How can I remove the event listener within 'reaction'?

It is perhaps a good idea to define a method that handles the “keydown” 
event (listener) exclusively for the instance that inherits that method.

-- 
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