bind callback passed to custom events to the node context (#428)

src/generators/dom/visitors/attributes/addElementAttributes.js

@@ -184,7 +184,7 @@ export default function addElementAttributes ( generator, node, local ) {
 				local.init.addBlock( deindent`
 					var ${handlerName} = ${generator.alias( 'template' )}.events.${name}.call( ${generator.current.component}, ${local.name}, function ( event ) {
 						${handlerBody}
-					});
+					}.bind( ${local.name} ) );
 				` );
 
 				generator.current.builders.teardown.addLine( deindent`

test/generator/samples/event-handler-custom-node-context/_config.js

@@ -0,0 +1,15 @@
+export default {
+	'skip-ssr': true,
+
+	html: '<button>10</button>',
+
+	test ( assert, component, target, window ) {
+		const event = new window.MouseEvent( 'click' );
+
+		const button = target.querySelector( 'button' );
+
+		button.dispatchEvent( event );
+
+		assert.equal( target.innerHTML, '<button>11</button>' );
+	}
+};

test/generator/samples/event-handler-custom-node-context/main.html

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