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

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.

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

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.

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.

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

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

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.

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.

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

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