title: addEventListener, arrow functions, and `this`
body: <p>I'm going through the JavaScript30 challenge, and in <a href="https://github.com/wesbos/JavaScript30/blob/master/03%20-%20CSS%20Variables/index-FINISHED.html" rel="noreferrer">lesson 3</a> he's got some event listener calling a function that references the element it's called on as <code>this</code>:</p>
  
  <pre><code>const inputs = document.querySelectorAll('.controls input');
  function handleUpdate() {
    const suffix = this.dataset.sizing || '';
    document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
  }
  inputs.forEach(input =&gt; input.addEventListener('change', handleUpdate));
  inputs.forEach(input =&gt; input.addEventListener('mousemove', handleUpdate));
  </code></pre>
  
  <p>I'm trying to rewrite it with ES6 arrow function, but I can't get the <code>this</code> to work right. I got a workaround using <code>target</code>:</p>
  
  <pre><code>const handleUpdate = (e) =&gt; {
    const that = e.target;
    const newValue = `${that.value}${that.dataset.sizing || ''}`;
    etc.
  }
  </code></pre>
  
  <p>but I first tried to bind the function like that:</p>
  
  <pre><code>input.addEventListener('change', handleUpdate.bind(this));
  </code></pre>
  
  <p>But <code>this</code> inside the function still points to <code>window</code> and I don't understand why.</p>
  
  <p>Is there no "right" way to bind the function to the element in this case?</p>