From 20bf76b578f26b0280dadb4cd5842a261155a239 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Wed, 23 Nov 2016 13:20:02 -0500
Subject: [PATCH] component is context for custom event handlers

---
 .../attributes/addElementAttributes.js        |  2 +-
 .../event-handler-custom-context/_config.js   | 16 +++++++++++
 .../event-handler-custom-context/main.html    | 28 +++++++++++++++++++
 3 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 test/compiler/event-handler-custom-context/_config.js
 create mode 100644 test/compiler/event-handler-custom-context/main.html

diff --git a/compiler/generate/visitors/attributes/addElementAttributes.js b/compiler/generate/visitors/attributes/addElementAttributes.js
index 7d961482aa..5887d7cc4f 100644
--- a/compiler/generate/visitors/attributes/addElementAttributes.js
+++ b/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}
 					});
 				` );
diff --git a/test/compiler/event-handler-custom-context/_config.js b/test/compiler/event-handler-custom-context/_config.js
new file mode 100644
index 0000000000..5d725bfd71
--- /dev/null
+++ b/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>' );
+	}
+};
diff --git a/test/compiler/event-handler-custom-context/main.html b/test/compiler/event-handler-custom-context/main.html
new file mode 100644
index 0000000000..806f330d6c
--- /dev/null
+++ b/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>