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

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

bind and addEventListener/removeEventListener

Started byCezary Tomczyk <cezary.tomczyk@gmail.com>
First post2019-08-13 17:28 +0200
Last post2019-08-13 12:36 -0700
Articles 7 — 3 participants

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

Contents

  bind and addEventListener/removeEventListener Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2019-08-13 17:28 +0200
    Re: bind and addEventListener/removeEventListener Julio Di Egidio <julio@diegidio.name> - 2019-08-13 08:43 -0700
      Re: bind and addEventListener/removeEventListener Julio Di Egidio <julio@diegidio.name> - 2019-08-13 11:29 -0700
        Re: bind and addEventListener/removeEventListener Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2019-08-13 20:43 +0200
          Re: bind and addEventListener/removeEventListener Julio Di Egidio <julio@diegidio.name> - 2019-08-13 11:48 -0700
    Re: bind and addEventListener/removeEventListener Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-08-13 20:58 +0200
      Re: bind and addEventListener/removeEventListener Julio Di Egidio <julio@diegidio.name> - 2019-08-13 12:36 -0700

#37116 — bind and addEventListener/removeEventListener

FromCezary Tomczyk <cezary.tomczyk@gmail.com>
Date2019-08-13 17:28 +0200
Subjectbind and addEventListener/removeEventListener
Message-ID<qiukun$4ck$1@csiph.com>
Bind 
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind 
creates a new function.

Let's say we have #1:

document.body.addEventListener('click', myExampleClass.method.bind(this));

and then:

document.body.removeEventListener('click', myExampleClass.method);

based on my research it should not be correct as the function created by 
bind is different than the original passed by reference in 
document.body.removeEventListener.

If it is not correct then the approach like:

var myRef = myExampleClass.method.bind(this);

document.body.addEventListener('click', myRef);
document.body.removeEventListener('click', myRef);

should be more appropriate, I guess.

Need some thoughts on that.

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

[toc] | [next] | [standalone]

#37117

FromJulio Di Egidio <julio@diegidio.name>
Date2019-08-13 08:43 -0700
Message-ID<975e2d9e-b69c-4fe2-9ede-a88eddddb6f7@googlegroups.com>
In reply to#37116
On Tuesday, 13 August 2019 17:28:29 UTC+2, Cezary Tomczyk  wrote:
> Bind 
> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind 
> creates a new function.
> 
> Let's say we have #1:
> 
> document.body.addEventListener('click', myExampleClass.method.bind(this));
> 
> and then:
> 
> document.body.removeEventListener('click', myExampleClass.method);
> 
> based on my research it should not be correct as the function created by 
> bind is different than the original passed by reference in 
> document.body.removeEventListener.
> 
> If it is not correct then the approach like:
> 
> var myRef = myExampleClass.method.bind(this);

myExampleObject please...

> document.body.addEventListener('click', myRef);
> document.body.removeEventListener('click', myRef);
> 
> should be more appropriate, I guess.
> 
> Need some thoughts on that.

Sounds correct to me.

Julio

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

#37121

FromJulio Di Egidio <julio@diegidio.name>
Date2019-08-13 11:29 -0700
Message-ID<4b5c991a-e951-40a6-b2ca-7baaac4cb78e@googlegroups.com>
In reply to#37117
On Tuesday, 13 August 2019 17:43:17 UTC+2, Julio Di Egidio  wrote:
> On Tuesday, 13 August 2019 17:28:29 UTC+2, Cezary Tomczyk  wrote:
> > Bind 
> > https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind 
> > creates a new function.
> > 
> > Let's say we have #1:
> > 
> > document.body.addEventListener('click', myExampleClass.method.bind(this));
> > 
> > and then:
> > 
> > document.body.removeEventListener('click', myExampleClass.method);
> > 
> > based on my research it should not be correct as the function created by 
> > bind is different than the original passed by reference in 
> > document.body.removeEventListener.
> > 
> > If it is not correct then the approach like:
> > 
> > var myRef = myExampleClass.method.bind(this);
> 
> myExampleObject please...
> 
> > document.body.addEventListener('click', myRef);
> > document.body.removeEventListener('click', myRef);
> > 
> > should be more appropriate, I guess.
> > 
> > Need some thoughts on that.
> 
> Sounds correct to me.

But I think you could in fact do something like this:

  document.body.addEventListener('click', myobj.method.bind(this));

  document.body.removeEventListener('click', myobj.method.bind(this));

as long as the two happen within the same closure...

My point being, the two handlers do not have to match by some kind of
low-level reference equality, it's about being the same closure (functions
are closures in JS) and the comparison is essentially lexical (JS is a
functional language).

(Anyone please correct me if I am wrong, cannot find the relevant piece of
documentation right now: but I do remember using e.g. inline functions and
other complications no prob...)

Julio

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

#37122

FromCezary Tomczyk <cezary.tomczyk@gmail.com>
Date2019-08-13 20:43 +0200
Message-ID<qiv0d0$9vr$1@csiph.com>
In reply to#37121
On 13/08/2019 20:29, Julio Di Egidio wrote:
> On Tuesday, 13 August 2019 17:43:17 UTC+2, Julio Di Egidio  wrote:
>> On Tuesday, 13 August 2019 17:28:29 UTC+2, Cezary Tomczyk  wrote:
>>> Bind
>>> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
>>> creates a new function.
>>>
>>> Let's say we have #1:
>>>
>>> document.body.addEventListener('click', myExampleClass.method.bind(this));
>>>
>>> and then:
>>>
>>> document.body.removeEventListener('click', myExampleClass.method);
>>>
>>> based on my research it should not be correct as the function created by
>>> bind is different than the original passed by reference in
>>> document.body.removeEventListener.
>>>
>>> If it is not correct then the approach like:
>>>
>>> var myRef = myExampleClass.method.bind(this);
>>
>> myExampleObject please...
>>
>>> document.body.addEventListener('click', myRef);
>>> document.body.removeEventListener('click', myRef);
>>>
>>> should be more appropriate, I guess.
>>>
>>> Need some thoughts on that.
>>
>> Sounds correct to me.
> 
> But I think you could in fact do something like this:
> 
>    document.body.addEventListener('click', myobj.method.bind(this));
> 
>    document.body.removeEventListener('click', myobj.method.bind(this));
> 
> as long as the two happen within the same closure...
> 
> My point being, the two handlers do not have to match by some kind of
> low-level reference equality, it's about being the same closure (functions
> are closures in JS) and the comparison is essentially lexical (JS is a
> functional language).

That's the thing I am not sure - reference equality.

> (Anyone please correct me if I am wrong, cannot find the relevant piece of
> documentation right now: but I do remember using e.g. inline functions and
> other complications no prob...)

Okay, let's see if anyone else have opinions on that.

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

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

#37123

FromJulio Di Egidio <julio@diegidio.name>
Date2019-08-13 11:48 -0700
Message-ID<b5b27a77-0043-4796-968b-e5ac1a193ac3@googlegroups.com>
In reply to#37122
On Tuesday, 13 August 2019 20:43:50 UTC+2, Cezary Tomczyk  wrote:
> On 13/08/2019 20:29, Julio Di Egidio wrote:
> > On Tuesday, 13 August 2019 17:43:17 UTC+2, Julio Di Egidio  wrote:
> >> On Tuesday, 13 August 2019 17:28:29 UTC+2, Cezary Tomczyk  wrote:
> >>> Bind
> >>> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
> >>> creates a new function.
> >>>
> >>> Let's say we have #1:
> >>>
> >>> document.body.addEventListener('click', myExampleClass.method.bind(this));
> >>>
> >>> and then:
> >>>
> >>> document.body.removeEventListener('click', myExampleClass.method);
> >>>
> >>> based on my research it should not be correct as the function created by
> >>> bind is different than the original passed by reference in
> >>> document.body.removeEventListener.
> >>>
> >>> If it is not correct then the approach like:
> >>>
> >>> var myRef = myExampleClass.method.bind(this);
> >>
> >> myExampleObject please...
> >>
> >>> document.body.addEventListener('click', myRef);
> >>> document.body.removeEventListener('click', myRef);
> >>>
> >>> should be more appropriate, I guess.
> >>>
> >>> Need some thoughts on that.
> >>
> >> Sounds correct to me.
> > 
> > But I think you could in fact do something like this:
> > 
> >    document.body.addEventListener('click', myobj.method.bind(this));
> > 
> >    document.body.removeEventListener('click', myobj.method.bind(this));
> > 
> > as long as the two happen within the same closure...
> > 
> > My point being, the two handlers do not have to match by some kind of
> > low-level reference equality, it's about being the same closure (functions
> > are closures in JS) and the comparison is essentially lexical (JS is a
> > functional language).
> 
> That's the thing I am not sure - reference equality.
> 
> > (Anyone please correct me if I am wrong, cannot find the relevant piece of
> > documentation right now: but I do remember using e.g. inline functions and
> > other complications no prob...)
> 
> Okay, let's see if anyone else have opinions on that.

Either I am wrong or, more probably as I am just being cautious, I am not.
This is not a matter of opinions...

Julio

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

#37124

FromThomas 'PointedEars' Lahn <PointedEars@web.de>
Date2019-08-13 20:58 +0200
Message-ID<4464615.GXAFRqVoOG@PointedEars.de>
In reply to#37116
Cezary Tomczyk wrote:

> document.body.addEventListener('click', myExampleClass.method.bind(this));
> 
> and then:
> 
> document.body.removeEventListener('click', myExampleClass.method);
> 
> based on my research it should not be correct as the function created by
> bind is different than the original passed by reference in
> document.body.removeEventListener.
> 
> If it is not correct then the approach like:
> 
> var myRef = myExampleClass.method.bind(this);
> 
> document.body.addEventListener('click', myRef);
> document.body.removeEventListener('click', myRef);
> 
> should be more appropriate, I guess.
> 
> Need some thoughts on that.

Your logic is sound and correct.

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

#37125

FromJulio Di Egidio <julio@diegidio.name>
Date2019-08-13 12:36 -0700
Message-ID<670d5d5b-3d84-4c60-9f86-6e6e5e3c8fc2@googlegroups.com>
In reply to#37124
On Tuesday, 13 August 2019 20:58:41 UTC+2, Thomas 'PointedEars' Lahn  wrote:
> Cezary Tomczyk wrote:
> 
> > document.body.addEventListener('click', myExampleClass.method.bind(this));
> > 
> > and then:
> > 
> > document.body.removeEventListener('click', myExampleClass.method);
> > 
> > based on my research it should not be correct as the function created by
> > bind is different than the original passed by reference in
> > document.body.removeEventListener.
> > 
> > If it is not correct then the approach like:
> > 
> > var myRef = myExampleClass.method.bind(this);
> > 
> > document.body.addEventListener('click', myRef);
> > document.body.removeEventListener('click', myRef);
> > 
> > should be more appropriate, I guess.
> > 
> > Need some thoughts on that.
> 
> Your logic is sound and correct.

AFAIK, it's not sound: he is thinking in terms of reference equality, and
that's just not it...

Julio

[toc] | [prev] | [standalone]

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

csiph-web