<div dir="ltr">Gotcha ... so, you've a JS class coupled with the DOM so, since you use IDs, all you need to eventually do is<div><br></div><div>```js</div><div>on<span style="font-size:12.8px">button1click(e) {</span></div><div><span style="font-size:12.8px">  // ...</span></div><div><span style="font-size:12.8px">}</span></div><div>on<span style="font-size:12.8px">button2click(e) {</span></div><div><span style="font-size:12.8px">  // ...</span></div><div><span style="font-size:12.8px">}</span></div><div>on<span style="font-size:12.8px">button3click(e) {</span></div><div><span style="font-size:12.8px">  // ...</span></div><div><span style="font-size:12.8px">}</span></div><div>handleEvent(e) {</div><div>  this['on' + <a href="http://e.curentTarget.id">e.curentTarget.id</a> + 'click'](e);</div><div>}</div><div>```</div><div><br></div><div>I believe you would end up with similar code anyway because without `handleEvent` you would need three different methods anyway.</div><div><br></div><div>Once again, my examples were answering your first question that was: I'd like to set handlers without needing to store the bound reference each time.</div><div><br></div><div>Hence all my answers, but I guess it's a matter of personal taste.</div><div><br></div><div>Anyway, if it has to be native and different from `handleEvent`, the `<span style="font-size:12.8px">el.addEventListener('click', this.onClick, {context: this});</span>` variant would be my best pick.</div><div><br></div><div>Best Regards</div><div><br></div><div><br></div><div><br></div></div><div class="gmail_extra"><br><div class="gmail_quote">On Mon, May 9, 2016 at 5:37 PM, Mark Kennedy <span dir="ltr"><<a href="mailto:mkay581@gmail.com" target="_blank">mkay581@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">Sorry maybe I'm not explaining this the right way. My original intent is to lessen the code that I would have to write to achieve multiple event handlers which do different things on multiple DOM elements when constructing a class and also REMOVING the event listeners manually. I am assuming this is a scenario where the DOM elements are outliving their event listeners (for single page web applications for instance) so they must be removed manually. Let's say I have five buttons on a page and I want them all to do something different when they are clicked.<div><br></div><div>```html</div><div><button id="button1">button 1</button></div><div><span style="font-family:'helvetica neue',helvetica,arial,sans-serif"><button id="button2">button 2</button></span><br></div><div><span style="font-family:'helvetica neue',helvetica,arial,sans-serif"><button id="button3">button 3</button></span></div><div>```</div><div><br></div><div>With your approach, I would have to do this, right?</div><div><br></div><div>```js</div><div><div>class SomeClass {</div><div>  constructor() {</div><div>    let button1 = document.getElementById('button1');</div><div>    button1.addEventListener('click', this);</div><div><span style="font-family:'helvetica neue',helvetica,arial,sans-serif">    let button2 = document.getElementById('button2');</span><br></div><div><span style="font-family:'helvetica neue',helvetica,arial,sans-serif">    button2.addEventListener('click', this);</span><br></div><div><span style="font-family:'helvetica neue',helvetica,arial,sans-serif">    let button3 = document.getElementById('button3');</span><span style="font-family:'helvetica neue',helvetica,arial,sans-serif"><br></span></div><div><span style="font-family:'helvetica neue',helvetica,arial,sans-serif;line-height:1.5">    button3.addEventListener('mouseover', this);</span><br></div><div>  },</div><div><br></div><div>  onclick(e) {</div><div>   // if e.target is button1, </div><div>          // show modal</div><div><span style="font-family:'helvetica neue',helvetica,arial,sans-serif">   // if e.target is button2, </span></div><div><span style="font-family:'helvetica neue',helvetica,arial,sans-serif;line-height:1.5">          //</span><span style="font-family:'helvetica neue',helvetica,arial,sans-serif;line-height:1.5"> </span><span style="font-family:'helvetica neue',helvetica,arial,sans-serif">navigate backwards</span><br></div><div><span style="font-family:'helvetica neue',helvetica,arial,sans-serif">   // i f e.target is button 3, </span></div><div><span style="font-family:'helvetica neue',helvetica,arial,sans-serif;line-height:1.5">          //</span><span style="font-family:'helvetica neue',helvetica,arial,sans-serif;line-height:1.5"> </span><span style="font-family:'helvetica neue',helvetica,arial,sans-serif">do something else</span></div><div>  },</div><div><br></div><div>    onmouseover (e) {</div><div>      // if e.target is button 3 </div><div><span style="font-family:'helvetica neue',helvetica,arial,sans-serif;line-height:1.5">          //</span><span style="font-family:'helvetica neue',helvetica,arial,sans-serif;line-height:1.5"> </span>do something else different from the above </div><span class=""><div>    }</div><div><br></div><div>  handleEvent(e) {</div><div><span style="font-family:'helvetica neue',helvetica,arial,sans-serif">    this['on' + e.type](e);</span><br></div><div>}</div></span></div><div>```</div><div>It may just be me confused here, but the above code is much more overwhelming and much less intuitive than the solutions I've proposed above.</div><div><br></div><div>Hopefully this helps clarify a few things.</div><div><br></div></div><div class="HOEnZb"><div class="h5"><br><div class="gmail_quote"><div dir="ltr">On Mon, May 9, 2016 at 12:20 PM Andrea Giammarchi <<a href="mailto:andrea.giammarchi@gmail.com" target="_blank">andrea.giammarchi@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">Hi Mark, not sure I understand. What you are doing is exactly the same, there is no difference whatsoever with what I've shown to you.</div><div dir="ltr"><div><br></div><div>> <span style="font-size:12.8px">Yes but what happens when you have multiple event targets using the same `type` of event? You're going to require a lot of extra conditionals in `onclick` method. Again this approach is cumbersome and, imo, not the most efficient.</span></div><div><span style="font-size:12.8px"><br></span></div></div><div dir="ltr"><div><span style="font-size:12.8px">conditionals what? the onclick is called only when the node where you attached the listener as instance gets invoked. It never triggers in any other cases.</span></div><div><span style="font-size:12.8px">Or better, it is exactly the same as `</span><span style="font-size:12.8px">someNode.addEventListener('</span><span style="font-size:12.8px">click', (e) => this.onClick(e))</span><span style="font-size:12.8px">` ... really, PRECISELY the same.</span></div><div><span style="font-size:12.8px"><br></span></div><div><span style="font-size:12.8px">Whenever your `click` gets triggered, the `handleEvent` would behave **exactly** the same. Not sure I've stressed the *exactly* part enough so nothing is cumbersome, maybe you don't understand or you've never used this approach before.</span></div><div><span style="font-size:12.8px"><br></span></div><div><span style="font-size:12.8px">Otherwise, please show me a single example where adding a listener as callback, or bound callback, would be triggered differently from adding an instance with an inherited, or own, handleEvent.</span></div><div><span style="font-size:12.8px"><br></span></div><div><span style="font-size:12.8px">Going on ... </span></div><div><span style="font-size:12.8px"><br></span></div><div><span style="font-size:12.8px">> 1. </span><span style="font-size:12.8px">When an arrow function is used as the second parameter to `addEventListener`, the language can evaluate and use its scoped context</span><span style="font-size:12.8px"> ...</span></div><div><span style="font-size:12.8px"><br></span></div><div><span style="font-size:12.8px">This is not going to happen. It's an exception to the arrow that would confuse even more about its context.</span></div><div><span style="font-size:12.8px"><br></span></div><div><span style="font-size:12.8px">> 2. </span><span style="font-size:12.8px">Another solution would be if we could maybe pass a method string as the second parameter and then an optional context as the fourth parameter</span><span style="font-size:12.8px">  ...</span></div><div><span style="font-size:12.8px"><br></span></div><div><span style="font-size:12.8px">This is DOM land, since it's about `</span><span style="font-size:12.8px">addEventListener</span><span style="font-size:12.8px">` signature, and I would personally vote -1 to that variant.</span></div><div><span style="font-size:12.8px"><br></span></div><div><span style="font-size:12.8px"><br></span></div><div><span style="font-size:12.8px">You should really try to understand how `handleEvent` works, IMO. It's the sugar you're looking for already since it makes you set any listener you want *without* needing to store upfront the bound method: fast, clean, simple.</span></div><div><span style="font-size:12.8px"><br></span></div><div><span style="font-size:12.8px">To remove a listener at any time, you don't need to store upfront a bound version of the method.</span></div><div><span style="font-size:12.8px"><br></span></div><div><span style="font-size:12.8px">Best Regards</span></div><div><span style="font-size:12.8px"><br></span></div><div><span style="font-size:12.8px"><br></span></div><div><span style="font-size:12.8px"><br></span></div></div><div class="gmail_extra"><br><div class="gmail_quote">On Mon, May 9, 2016 at 5:05 PM, Mark Kennedy <span dir="ltr"><<a href="mailto:mkay581@gmail.com" target="_blank">mkay581@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">Yes but what happens when you have multiple event targets using the same `type` of event? You're going to require a lot of extra conditionals in `onclick` method. Again this approach is cumbersome and, imo, not the most efficient.<div><br></div><div>These may not be the best solutions but here are a few options I've thought of:</div><div><br></div><div>1. When an arrow function is used as the second parameter to `addEventListener`, the language can evaluate and use its scoped context when the same function is used with a subsequent `removeEventListener call, so essentially the following code would work when calling destroy.<br><br><br>```js<br>class MyClass {<br> constructor () {<br> someNode.addEventListener('click', (e) => this.onClick(e))<br> }<br><br> onClick (e) {<br> // do something here<br> }<br><br> destroy () {<br> someNode.removeEventListener('click', (e) => this.onClick(e))<br> }<br>}<br><br>```<br><br>2. Another solution would be if we could maybe pass a method string as the second parameter and then an optional context as the fourth parameter to addEventListener and removeEventListener as follows:<br><br><br>```js<br>class MyClass {<br> constructor () {<br> someNode.addEventListener('click', 'onClick', {}, this)<br> }<br><br> onClick (e) {<br> // do something here<br> }<br><br> destroy () {<br> someNode.removeEventListener('click', 'onClick', {}, this)<br> }<br>}<br><br>```<div><div><br><br><div class="gmail_quote"><div dir="ltr">On Mon, May 9, 2016 at 9:52 AM Andrea Giammarchi <<a href="mailto:andrea.giammarchi@gmail.com" target="_blank">andrea.giammarchi@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">uhm, I've used commas ... anyway, the sugar is desugaring to old methods, this is working example:<div><br></div><div>```js</div><div></div></div><div dir="ltr"><div><div style="font-size:12.8px">class <span style="font-size:12.8px">SomeClass {</span></div><div style="font-size:12.8px"><span style="font-size:12.8px">  constructor(someNode) {</span></div><div style="font-size:12.8px"><span style="font-size:12.8px">    someNode.addEventListener('click', this);</span></div><div style="font-size:12.8px"><span style="font-size:12.8px">  }</span></div></div></div><div dir="ltr"><div><div style="font-size:12.8px"><span style="font-size:12.8px">  onclick(e) {</span></div><div style="font-size:12.8px"><span style="font-size:12.8px">    alert(<a href="http://this.constructor.name/" target="_blank">this.constructor.name</a>); // SomeClass</span></div><div style="font-size:12.8px"><span style="font-size:12.8px">  }</span></div><span style="font-size:12.8px"></span></div></div><div dir="ltr"><div><span style="font-size:12.8px"><div style="font-size:12.8px"><span style="font-size:12.8px">  handleEvent(e) {</span></div><div style="font-size:12.8px"><span style="font-size:12.8px">    this['on' + e.type](e);</span></div><div style="font-size:12.8px"><span style="font-size:12.8px">  }</span></div><div style="font-size:12.8px"><span style="font-size:12.8px">}</span></div><div style="font-size:12.8px"><span style="font-size:12.8px"><br></span></div></span></div></div><div dir="ltr"><div><span style="font-size:12.8px"><div style="font-size:12.8px"><span style="font-size:12.8px">new </span><span style="color:rgb(34,34,34);font-size:12.8px">SomeClass(document.documentElement);</span></div></span></div><div>```</div><div><br></div><div>The difference with your example is that you will always be able to remove the instance without needing to store upfront every bound listener.</div><div><br></div><div>To know where the `addEventListener` was set you always have the `e.currentTarget` so basically you have a weakmap between a node and an object where you can always retrieve the initial node that used the object through the event, keeping the node clean from "expando" links.</div><div><br></div><div>More sugar than this, I'm not sure what would be.</div><div><br></div><div>You could also have a simple naming convention where every method that starts with `on` will be set as listener using the current instance, and do the same, if necessary, on teardown/destroy.</div><div><br></div><div>What kind of sugar would you use otherwise?</div><div><br></div><div>The only proposal discussed so far is `<span style="font-size:12.8px">el.addEventListener('</span><span style="font-size:12.8px">click', </span>::<span style="font-size:12.8px">this.onClick)</span>`, unfortunately that doesn't solve anything because AFAIK they don't see any advantage in having `::<span style="font-size:12.8px">this.onClick === </span>::<span style="font-size:12.8px">this.onClick</span>` which is what I've raised already as "that's what developers would expect" but apparently it's too costy or complicated or ... dunno.</div><div><br></div><div><span style="color:rgb(0,0,0);font-family:sans-serif;font-size:medium">¯\_(ツ)_/¯</span><br></div><div><span style="color:rgb(0,0,0);font-family:sans-serif;font-size:medium"><br></span></div><div><span style="color:rgb(0,0,0);font-family:sans-serif;font-size:medium">Best Regards</span></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div></div><div class="gmail_extra"><br><div class="gmail_quote">On Mon, May 9, 2016 at 2:41 PM, Andrea Giammarchi <span dir="ltr"><<a href="mailto:andrea.giammarchi@gmail.com" target="_blank">andrea.giammarchi@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr"><span style="font-size:12.8px">Raising a concern about `addEventListener` and its context probably made me think it was rather a WHATWG concern.</span><div style="font-size:12.8px"><br></div><div style="font-size:12.8px">Anyway, I don't know why you had to point out the `class` keyword ... I mean ....</div><div style="font-size:12.8px"><br></div><div style="font-size:12.8px">```js</div><div style="font-size:12.8px">class <span style="font-size:12.8px">SomeClass {</span></div><div style="font-size:12.8px"><span style="font-size:12.8px">  constructor(someNode) {</span></div><div style="font-size:12.8px"><span style="font-size:12.8px">    someNode.addEventListener('click', this);</span></div><div style="font-size:12.8px"><span style="font-size:12.8px">  },</span></div><div style="font-size:12.8px"><span style="font-size:12.8px">  onclick(e) {</span></div><div style="font-size:12.8px"><span style="font-size:12.8px">    alert(<a href="http://this.constructor.name/" target="_blank">this.constructor.name</a>); // SomeClass</span></div><div style="font-size:12.8px"><span style="font-size:12.8px">  },</span></div><span><div style="font-size:12.8px"><span style="font-size:12.8px">  handleEvent(e) {</span></div><div style="font-size:12.8px"><span style="font-size:12.8px">    this['on' + e.type](e);</span></div><div style="font-size:12.8px"><span style="font-size:12.8px">  }</span></div><div style="font-size:12.8px"><span style="font-size:12.8px">}</span></div></span><div style="font-size:12.8px">```</div><div class="gmail_extra" style="font-size:12.8px"><br></div><div class="gmail_extra" style="font-size:12.8px">There you go</div><div class="gmail_extra" style="font-size:12.8px"><br></div><div class="gmail_extra" style="font-size:12.8px">Best Regards</div><div><br></div></div><div class="gmail_extra"><br><div class="gmail_quote"><div><div>On Mon, May 9, 2016 at 2:38 PM, Mark Kennedy <span dir="ltr"><<a href="mailto:mkay581@gmail.com" target="_blank">mkay581@gmail.com</a>></span> wrote:<br></div></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div><div><div dir="ltr"><div>Wow that's so ironic because [I posted this same idea](</div><div><a href="https://github.com/whatwg/dom/issues/245#issuecomment-217816301" target="_blank">https://github.com/whatwg/dom/issues/245#issuecomment-217816301</a>) (literally</div><div>copied and pasted) in WHATWG's "DOM land" and they told me this was an</div><div>es-discuss issue. So which is it?</div><div>Oh and thanks for the code sample but it uses the old prototypical method</div><div>of replicating a class by creating a function which is now not the most</div><div>efficient way (there's the `class` keyword). And I don't see how what</div><div>you're doing isn't any different from a roundabout way of what I did. I</div><div>already know about the `handleEvent()` stuff, I like that it's available</div><div>and its polyfills. They are great, but my original question is to implement</div><div>sugar so that you don't have to use polyfills or the `handleEvent()`.</div></div><span><font color="#888888"><div dir="ltr">-- <br></div><div dir="ltr"><p dir="ltr"><span style="color:rgb(0,0,0);font-size:small">mark</span><br></p><p dir="ltr">Sent while riding a hoverboard...<br>
<a href="http://heyimmark.com" target="_blank">heyimmark.com</a> :)</p>
</div>
</font></span><br></div></div><span>_______________________________________________<br>
es-discuss mailing list<br>
<a href="mailto:es-discuss@mozilla.org" target="_blank">es-discuss@mozilla.org</a><br>
<a href="https://mail.mozilla.org/listinfo/es-discuss" rel="noreferrer" target="_blank">https://mail.mozilla.org/listinfo/es-discuss</a><br>
<br></span></blockquote></div><br></div>
</blockquote></div><br></div>
</blockquote></div></div></div></div></div><div><div><div dir="ltr">-- <br></div><div dir="ltr"><p dir="ltr"><span style="color:rgb(0,0,0);font-size:small">mark</span><br></p><p dir="ltr">Sent while riding a hoverboard...<br>
<a href="http://heyimmark.com" target="_blank">heyimmark.com</a> :)</p>
</div>
</div></div></blockquote></div><br></div>
</blockquote></div><div dir="ltr">-- <br></div><div dir="ltr"><p dir="ltr"><span style="color:rgb(0,0,0);font-size:small">mark</span><br></p><p dir="ltr">Sent while riding a hoverboard...<br>
<a href="http://heyimmark.com" target="_blank">heyimmark.com</a> :)</p>
</div>
</div></div></blockquote></div><br></div>