Merge pull request #2709 from LostKobrakai/multiple-event-listeners

Allow multiple event listeners on a single node

src/parse/state/tag.ts

@@ -360,6 +360,14 @@ function read_attribute(parser: Parser, unique_names: Set<string>) {
 
 	let name = parser.read_until(/(\s|=|\/|>)/);
 	if (!name) return null;
+
+	let end = parser.index;
+
+	parser.allow_whitespace();
+
+	const colon_index = name.indexOf(':');
+	const type = colon_index !== -1 && get_directive_type(name.slice(0, colon_index));
+
 	if (unique_names.has(name)) {
 		parser.error({
 			code: `duplicate-attribute`,
@@ -367,14 +375,9 @@ function read_attribute(parser: Parser, unique_names: Set<string>) {
 		}, start);
 	}
 
+	if (type !== "EventHandler") {
 		unique_names.add(name);
-
+	}
-	let end = parser.index;
-
-	parser.allow_whitespace();
-
-	const colon_index = name.indexOf(':');
-	const type = colon_index !== -1 && get_directive_type(name.slice(0, colon_index));
 
 	let value: any[] | true = true;
 	if (parser.eat('=')) {

test/runtime/samples/event-handler-multiple/_config.js

@@ -0,0 +1,14 @@
+export default {
+	html: `
+		<button>click me</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+		assert.equal(component.clickHandlerOne, 1);
+		assert.equal(component.clickHandlerTwo, 1);
+	}
+};

test/runtime/samples/event-handler-multiple/main.svelte

@@ -0,0 +1,6 @@
+<script>
+	export let clickHandlerOne = 0;
+	export let clickHandlerTwo = 0;
+</script>
+
+<button on:click='{() => clickHandlerOne++}' on:click='{() => clickHandlerTwo++}'>click me</button>