this has wrong meaning in custom event handler

[Rich-Harris]

In this situation (REPL)...

<p>Select the input, hit 'enter', check the console</p>
<input on:enter='this.blur()'>

<script>
  export default {
    events: {
      enter(node, callback) {
        function handleKeydown(event) {
          if (event.which === 13) callback();
        }

        node.addEventListener('keydown', handleKeydown);

        return {
          destroy() {
            node.removeEventListener('keydown', handleKeydown);
          }
        };
      }
    }
  };
</script>

I'd expect this.blur() to refer to the <input>, but this code is generated:

enter_handler = enter.call(component, input, function(event) {
	this.blur();
});

this should probably be rewritten as input.

Workaround is this:

-if (event.which === 13) callback();
+if (event.which === 13) callback.call(node);

[ekhaled]

I have a couple things to point out.

1. Would fixing this break BC
2. Will fixing this mean we cannot access the component context anymore from inside the handlers
3. The new actions have a similar signature, would they benefit from being called in the context of the node

[Rich-Harris]

Good news all round:

1. No, because at the moment this is undefined, so you can't use it anyway. It's really just a bugfix
2. the only this that's affected is the handler itself — this.blur() becomes input.blur(). The enter function is still called with the component as context
3. Actions receive the node as an argument and have the component as this (same as event handlers) — I think that should stay the way it is