component is context for custom event handlers

compiler/generate/visitors/attributes/addElementAttributes.js

@@ -137,7 +137,7 @@ export default function addElementAttributes ( generator, node, local ) {
 
 			if ( attribute.name in generator.events ) {
 				local.init.push( deindent`
-					const ${handlerName} = template.events.${attribute.name}( ${local.name}, function ( event ) {
+					const ${handlerName} = template.events.${attribute.name}.call( component, ${local.name}, function ( event ) {
 						${handlerBody}
 					});
 				` );

test/compiler/event-handler-custom-context/_config.js

@@ -0,0 +1,16 @@
+export default {
+	html: '<button>???</button>',
+
+	test ( assert, component, target, window ) {
+		const event = new window.MouseEvent( 'click', {
+			clientX: 42,
+			clientY: 42
+		});
+
+		const button = target.querySelector( 'button' );
+
+		button.dispatchEvent( event );
+
+		assert.equal( target.innerHTML, '<button>42</button>' );
+	}
+};

test/compiler/event-handler-custom-context/main.html

@@ -0,0 +1,28 @@
+<button on:tap='set({ z: event.answer })'>{{z}}</button>
+
+<script>
+	export default {
+		data: () => ({
+			z: '???',
+			answer: '42'
+		}),
+
+		events: {
+			tap ( node, callback ) {
+				const clickHandler = event => {
+					callback({
+						answer: this.get( 'answer' )
+					});
+				};
+
+				node.addEventListener( 'click', clickHandler, false );
+
+				return {
+					teardown () {
+						node.addEventListener( 'click', clickHandler, false );
+					}
+				};
+			}
+		}
+	};
+</script>