From 867702a6f29263ddeeb64df0be649990d78a8e81 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Thu, 17 Apr 2025 09:08:49 +0100
Subject: [PATCH 1/8] feat: add `no-add-event-listener` rule

---
 README.md                                     |   1 +
 docs/rules.md                                 |   1 +
 docs/rules/no-add-event-listener.md           |  31 ++
 .../eslint-plugin-svelte/src/rule-types.ts    |   5 +
 .../src/rules/no-add-event-listener.ts        |  74 +++++
 .../eslint-plugin-svelte/src/utils/rules.ts   |   2 +
 .../invalid/_requirements.json                |   3 +
 .../invalid/test01-errors.yaml                | 266 ++++++++++++++++++
 .../invalid/test01-input.svelte               |  31 ++
 .../valid/_requirements.json                  |   3 +
 .../valid/test01-input.svelte                 |  19 ++
 .../tests/src/rules/no-add-event-listener.ts  |  12 +
 12 files changed, 448 insertions(+)
 create mode 100644 docs/rules/no-add-event-listener.md
 create mode 100644 packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts
 create mode 100644 packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/_requirements.json
 create mode 100644 packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-errors.yaml
 create mode 100644 packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-input.svelte
 create mode 100644 packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/valid/_requirements.json
 create mode 100644 packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/valid/test01-input.svelte
 create mode 100644 packages/eslint-plugin-svelte/tests/src/rules/no-add-event-listener.ts

diff --git a/README.md b/README.md
index edc472b33..e69f037ae 100644
--- a/README.md
+++ b/README.md
@@ -294,6 +294,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 |:--------|:------------|:---|
 | [svelte/block-lang](https://sveltejs.github.io/eslint-plugin-svelte/rules/block-lang/) | disallows the use of languages other than those specified in the configuration for the lang attribute of `<script>` and `<style>` blocks. | :bulb: |
 | [svelte/button-has-type](https://sveltejs.github.io/eslint-plugin-svelte/rules/button-has-type/) | disallow usage of button without an explicit type attribute |  |
+| [svelte/no-add-event-listener](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-add-event-listener/) | Warns against the use of `addEventListener` | :bulb: |
 | [svelte/no-at-debug-tags](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-at-debug-tags/) | disallow the use of `{@debug}` | :star::bulb: |
 | [svelte/no-ignored-unsubscribe](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-ignored-unsubscribe/) | disallow ignoring the unsubscribe method returned by the `subscribe()` on Svelte stores. |  |
 | [svelte/no-immutable-reactive-statements](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-immutable-reactive-statements/) | disallow reactive statements that don't reference reactive values. | :star: |
diff --git a/docs/rules.md b/docs/rules.md
index 75dd5ed5e..18fc6e2bd 100644
--- a/docs/rules.md
+++ b/docs/rules.md
@@ -51,6 +51,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | :--------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------- | :------------- |
 | [svelte/block-lang](./rules/block-lang.md)                                               | disallows the use of languages other than those specified in the configuration for the lang attribute of `<script>` and `<style>` blocks. | :bulb:         |
 | [svelte/button-has-type](./rules/button-has-type.md)                                     | disallow usage of button without an explicit type attribute                                                                               |                |
+| [svelte/no-add-event-listener](./rules/no-add-event-listener.md)                         | Warns against the use of `addEventListener`                                                                                               | :bulb:         |
 | [svelte/no-at-debug-tags](./rules/no-at-debug-tags.md)                                   | disallow the use of `{@debug}`                                                                                                            | :star::bulb:   |
 | [svelte/no-ignored-unsubscribe](./rules/no-ignored-unsubscribe.md)                       | disallow ignoring the unsubscribe method returned by the `subscribe()` on Svelte stores.                                                  |                |
 | [svelte/no-immutable-reactive-statements](./rules/no-immutable-reactive-statements.md)   | disallow reactive statements that don't reference reactive values.                                                                        | :star:         |
diff --git a/docs/rules/no-add-event-listener.md b/docs/rules/no-add-event-listener.md
new file mode 100644
index 000000000..0371457e1
--- /dev/null
+++ b/docs/rules/no-add-event-listener.md
@@ -0,0 +1,31 @@
+---
+pageClass: 'rule-details'
+sidebarDepth: 0
+title: 'svelte/no-add-event-listener'
+description: 'Warns against the use of `addEventListener`'
+---
+
+# svelte/no-add-event-listener
+
+> Warns against the use of `addEventListener`
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+This rule reports usages of `addEventListener`:
+
+<!--eslint-skip-->
+
+```svelte
+<script>
+  /* eslint svelte/no-add-event-listener: "error" */
+  addEventListener(window, 'resize', handler);
+</script>
+```
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts)
+- [Test source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/tests/src/rules/no-add-event-listener.ts)
diff --git a/packages/eslint-plugin-svelte/src/rule-types.ts b/packages/eslint-plugin-svelte/src/rule-types.ts
index ac9f2a94f..8c56fd802 100644
--- a/packages/eslint-plugin-svelte/src/rule-types.ts
+++ b/packages/eslint-plugin-svelte/src/rule-types.ts
@@ -99,6 +99,11 @@ export interface RuleOptions {
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/mustache-spacing/
    */
   'svelte/mustache-spacing'?: Linter.RuleEntry<SvelteMustacheSpacing>
+  /**
+   * Warns against the use of `addEventListener`
+   * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-add-event-listener/
+   */
+  'svelte/no-add-event-listener'?: Linter.RuleEntry<[]>
   /**
    * disallow the use of `{@debug}`
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-at-debug-tags/
diff --git a/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts b/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts
new file mode 100644
index 000000000..fb478ce72
--- /dev/null
+++ b/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts
@@ -0,0 +1,74 @@
+import type { TSESTree } from '@typescript-eslint/types';
+
+import { createRule } from '../utils/index.js';
+import type { SuggestionReportDescriptor } from '../types.js';
+
+export default createRule('no-add-event-listener', {
+	meta: {
+		docs: {
+			description: 'Warns against the use of `addEventListener`',
+			category: 'Best Practices',
+			recommended: false,
+			default: 'warn'
+		},
+		hasSuggestions: true,
+		schema: [],
+		messages: {
+			unexpected:
+				'Do not use `addEventListener`. Use the `on` function from `svelte/events` instead.'
+		},
+		type: 'suggestion',
+		conditions: [
+			{
+				svelteVersions: ['5']
+			}
+		]
+	},
+	create(context) {
+		return {
+			CallExpression(node: TSESTree.CallExpression) {
+				const { callee, arguments: args } = node;
+				let target: string | null = null;
+
+				if (args.length !== 2) {
+					return;
+				}
+
+				if (
+					callee.type === 'MemberExpression' &&
+					callee.property.type === 'Identifier' &&
+					callee.property.name === 'addEventListener'
+				) {
+					target = context.sourceCode.getText(callee.object);
+				} else if (callee.type === 'Identifier' && callee.name === 'addEventListener') {
+					target = 'window';
+				}
+
+				if (target === null) {
+					return;
+				}
+
+				const openParen = context.sourceCode.getTokenAfter(callee);
+				const suggest: SuggestionReportDescriptor[] = [];
+
+				if (openParen !== null) {
+					suggest.push({
+						desc: 'Use `on` from `svelte/events` instead',
+						fix(fixer) {
+							return [
+								fixer.replaceText(callee, 'on'),
+								fixer.insertTextAfter(openParen, `${target}, `)
+							];
+						}
+					});
+				}
+
+				context.report({
+					node,
+					messageId: 'unexpected',
+					suggest
+				});
+			}
+		};
+	}
+});
diff --git a/packages/eslint-plugin-svelte/src/utils/rules.ts b/packages/eslint-plugin-svelte/src/utils/rules.ts
index e79cd969a..446c49b1a 100644
--- a/packages/eslint-plugin-svelte/src/utils/rules.ts
+++ b/packages/eslint-plugin-svelte/src/utils/rules.ts
@@ -19,6 +19,7 @@ import indent from '../rules/indent.js';
 import infiniteReactiveLoop from '../rules/infinite-reactive-loop.js';
 import maxAttributesPerLine from '../rules/max-attributes-per-line.js';
 import mustacheSpacing from '../rules/mustache-spacing.js';
+import noAddEventListener from '../rules/no-add-event-listener.js';
 import noAtDebugTags from '../rules/no-at-debug-tags.js';
 import noAtHtmlTags from '../rules/no-at-html-tags.js';
 import noDomManipulating from '../rules/no-dom-manipulating.js';
@@ -96,6 +97,7 @@ export const rules = [
 	infiniteReactiveLoop,
 	maxAttributesPerLine,
 	mustacheSpacing,
+	noAddEventListener,
 	noAtDebugTags,
 	noAtHtmlTags,
 	noDomManipulating,
diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/_requirements.json b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/_requirements.json
new file mode 100644
index 000000000..0192b1098
--- /dev/null
+++ b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/_requirements.json
@@ -0,0 +1,3 @@
+{
+	"svelte": ">=5.0.0-0"
+}
diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-errors.yaml b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-errors.yaml
new file mode 100644
index 000000000..7ae3e6dc1
--- /dev/null
+++ b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-errors.yaml
@@ -0,0 +1,266 @@
+- message: Do not use `addEventListener`. Use the `on` function from
+    `svelte/events` instead.
+  line: 17
+  column: 3
+  suggestions:
+    - desc: Use `on` from `svelte/events` instead
+      output: |
+        <script>
+        	const handler = (ev) => {
+        		console.log(ev);
+        	};
+
+        	function onClick(event) {
+        		const target = event.currentTarget;
+
+        		const deepObj = {
+        			deep: {
+        				obj: {
+        					target
+        				}
+        			}
+        		};
+
+        		on(target, 'focus', handler);
+        		deepObj.deep.obj.target.addEventListener('focus', handler);
+        	}
+
+        	addEventListener('message', handler);
+        	window.addEventListener('message', handler);
+        	document.addEventListener('visibilitychange', handler);
+
+        	// with a load of whitespace
+        	window.addEventListener    ('message', handler);
+        	// with a comment
+        	window.addEventListener/* foo */('message', handler);
+        </script>
+
+        <button onclick={onClick}>Hello</button>
+- message: Do not use `addEventListener`. Use the `on` function from
+    `svelte/events` instead.
+  line: 18
+  column: 3
+  suggestions:
+    - desc: Use `on` from `svelte/events` instead
+      output: |
+        <script>
+        	const handler = (ev) => {
+        		console.log(ev);
+        	};
+
+        	function onClick(event) {
+        		const target = event.currentTarget;
+
+        		const deepObj = {
+        			deep: {
+        				obj: {
+        					target
+        				}
+        			}
+        		};
+
+        		target.addEventListener('focus', handler);
+        		on(deepObj.deep.obj.target, 'focus', handler);
+        	}
+
+        	addEventListener('message', handler);
+        	window.addEventListener('message', handler);
+        	document.addEventListener('visibilitychange', handler);
+
+        	// with a load of whitespace
+        	window.addEventListener    ('message', handler);
+        	// with a comment
+        	window.addEventListener/* foo */('message', handler);
+        </script>
+
+        <button onclick={onClick}>Hello</button>
+- message: Do not use `addEventListener`. Use the `on` function from
+    `svelte/events` instead.
+  line: 21
+  column: 2
+  suggestions:
+    - desc: Use `on` from `svelte/events` instead
+      output: |
+        <script>
+        	const handler = (ev) => {
+        		console.log(ev);
+        	};
+
+        	function onClick(event) {
+        		const target = event.currentTarget;
+
+        		const deepObj = {
+        			deep: {
+        				obj: {
+        					target
+        				}
+        			}
+        		};
+
+        		target.addEventListener('focus', handler);
+        		deepObj.deep.obj.target.addEventListener('focus', handler);
+        	}
+
+        	on(window, 'message', handler);
+        	window.addEventListener('message', handler);
+        	document.addEventListener('visibilitychange', handler);
+
+        	// with a load of whitespace
+        	window.addEventListener    ('message', handler);
+        	// with a comment
+        	window.addEventListener/* foo */('message', handler);
+        </script>
+
+        <button onclick={onClick}>Hello</button>
+- message: Do not use `addEventListener`. Use the `on` function from
+    `svelte/events` instead.
+  line: 22
+  column: 2
+  suggestions:
+    - desc: Use `on` from `svelte/events` instead
+      output: |
+        <script>
+        	const handler = (ev) => {
+        		console.log(ev);
+        	};
+
+        	function onClick(event) {
+        		const target = event.currentTarget;
+
+        		const deepObj = {
+        			deep: {
+        				obj: {
+        					target
+        				}
+        			}
+        		};
+
+        		target.addEventListener('focus', handler);
+        		deepObj.deep.obj.target.addEventListener('focus', handler);
+        	}
+
+        	addEventListener('message', handler);
+        	on(window, 'message', handler);
+        	document.addEventListener('visibilitychange', handler);
+
+        	// with a load of whitespace
+        	window.addEventListener    ('message', handler);
+        	// with a comment
+        	window.addEventListener/* foo */('message', handler);
+        </script>
+
+        <button onclick={onClick}>Hello</button>
+- message: Do not use `addEventListener`. Use the `on` function from
+    `svelte/events` instead.
+  line: 23
+  column: 2
+  suggestions:
+    - desc: Use `on` from `svelte/events` instead
+      output: |
+        <script>
+        	const handler = (ev) => {
+        		console.log(ev);
+        	};
+
+        	function onClick(event) {
+        		const target = event.currentTarget;
+
+        		const deepObj = {
+        			deep: {
+        				obj: {
+        					target
+        				}
+        			}
+        		};
+
+        		target.addEventListener('focus', handler);
+        		deepObj.deep.obj.target.addEventListener('focus', handler);
+        	}
+
+        	addEventListener('message', handler);
+        	window.addEventListener('message', handler);
+        	on(document, 'visibilitychange', handler);
+
+        	// with a load of whitespace
+        	window.addEventListener    ('message', handler);
+        	// with a comment
+        	window.addEventListener/* foo */('message', handler);
+        </script>
+
+        <button onclick={onClick}>Hello</button>
+- message: Do not use `addEventListener`. Use the `on` function from
+    `svelte/events` instead.
+  line: 26
+  column: 2
+  suggestions:
+    - desc: Use `on` from `svelte/events` instead
+      output: |
+        <script>
+        	const handler = (ev) => {
+        		console.log(ev);
+        	};
+
+        	function onClick(event) {
+        		const target = event.currentTarget;
+
+        		const deepObj = {
+        			deep: {
+        				obj: {
+        					target
+        				}
+        			}
+        		};
+
+        		target.addEventListener('focus', handler);
+        		deepObj.deep.obj.target.addEventListener('focus', handler);
+        	}
+
+        	addEventListener('message', handler);
+        	window.addEventListener('message', handler);
+        	document.addEventListener('visibilitychange', handler);
+
+        	// with a load of whitespace
+        	on    (window, 'message', handler);
+        	// with a comment
+        	window.addEventListener/* foo */('message', handler);
+        </script>
+
+        <button onclick={onClick}>Hello</button>
+- message: Do not use `addEventListener`. Use the `on` function from
+    `svelte/events` instead.
+  line: 28
+  column: 2
+  suggestions:
+    - desc: Use `on` from `svelte/events` instead
+      output: |
+        <script>
+        	const handler = (ev) => {
+        		console.log(ev);
+        	};
+
+        	function onClick(event) {
+        		const target = event.currentTarget;
+
+        		const deepObj = {
+        			deep: {
+        				obj: {
+        					target
+        				}
+        			}
+        		};
+
+        		target.addEventListener('focus', handler);
+        		deepObj.deep.obj.target.addEventListener('focus', handler);
+        	}
+
+        	addEventListener('message', handler);
+        	window.addEventListener('message', handler);
+        	document.addEventListener('visibilitychange', handler);
+
+        	// with a load of whitespace
+        	window.addEventListener    ('message', handler);
+        	// with a comment
+        	on/* foo */(window, 'message', handler);
+        </script>
+
+        <button onclick={onClick}>Hello</button>
diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-input.svelte b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-input.svelte
new file mode 100644
index 000000000..d51aeca93
--- /dev/null
+++ b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-input.svelte
@@ -0,0 +1,31 @@
+<script>
+	const handler = (ev) => {
+		console.log(ev);
+	};
+
+	function onClick(event) {
+		const target = event.currentTarget;
+
+		const deepObj = {
+			deep: {
+				obj: {
+					target
+				}
+			}
+		};
+
+		target.addEventListener('focus', handler);
+		deepObj.deep.obj.target.addEventListener('focus', handler);
+	}
+
+	addEventListener('message', handler);
+	window.addEventListener('message', handler);
+	document.addEventListener('visibilitychange', handler);
+
+	// with a load of whitespace
+	window.addEventListener    ('message', handler);
+	// with a comment
+	window.addEventListener/* foo */('message', handler);
+</script>
+
+<button onclick={onClick}>Hello</button>
diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/valid/_requirements.json b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/valid/_requirements.json
new file mode 100644
index 000000000..0192b1098
--- /dev/null
+++ b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/valid/_requirements.json
@@ -0,0 +1,3 @@
+{
+	"svelte": ">=5.0.0-0"
+}
diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/valid/test01-input.svelte b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/valid/test01-input.svelte
new file mode 100644
index 000000000..0b48a7d94
--- /dev/null
+++ b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/valid/test01-input.svelte
@@ -0,0 +1,19 @@
+<script>
+	import { on } from 'svelte/events';
+
+	const handler = (ev) => {
+		console.log(ev);
+	};
+
+	function onClick(event) {
+		const target = event.currentTarget;
+
+		on(target, 'focus', handler);
+	}
+
+	on(window, 'message', handler);
+	on(document, 'visibilitychange', handler);
+
+</script>
+
+<button onclick={onClick}>Hello</button>
diff --git a/packages/eslint-plugin-svelte/tests/src/rules/no-add-event-listener.ts b/packages/eslint-plugin-svelte/tests/src/rules/no-add-event-listener.ts
new file mode 100644
index 000000000..a2b5928d1
--- /dev/null
+++ b/packages/eslint-plugin-svelte/tests/src/rules/no-add-event-listener.ts
@@ -0,0 +1,12 @@
+import { RuleTester } from '../../utils/eslint-compat.js';
+import rule from '../../../src/rules/no-add-event-listener.js';
+import { loadTestCases } from '../../utils/utils.js';
+
+const tester = new RuleTester({
+	languageOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module'
+	}
+});
+
+tester.run('no-add-event-listener', rule as any, loadTestCases('no-add-event-listener'));

From da8cb79f5140c232edcc07282c966d61a5cbcde7 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Mon, 21 Apr 2025 13:51:17 +0100
Subject: [PATCH 2/8] test: add options test cases

---
 docs/rules/no-add-event-listener.md           | 13 +++-
 .../src/rules/no-add-event-listener.ts        |  2 +-
 .../invalid/test01-errors.yaml                | 62 +++++++++++++++++++
 .../invalid/test01-input.svelte               |  3 +
 .../invalid/typescript01-errors.yaml          | 17 +++++
 .../invalid/typescript01-input.svelte         | 10 +++
 6 files changed, 105 insertions(+), 2 deletions(-)
 create mode 100644 packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/typescript01-errors.yaml
 create mode 100644 packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/typescript01-input.svelte

diff --git a/docs/rules/no-add-event-listener.md b/docs/rules/no-add-event-listener.md
index 0371457e1..2a81c9aff 100644
--- a/docs/rules/no-add-event-listener.md
+++ b/docs/rules/no-add-event-listener.md
@@ -19,9 +19,20 @@ This rule reports usages of `addEventListener`:
 <!--eslint-skip-->
 
 ```svelte
+<!-- ✓ GOOD -->
 <script>
   /* eslint svelte/no-add-event-listener: "error" */
-  addEventListener(window, 'resize', handler);
+  on(window, 'resize', handler);
+</script>
+```
+
+<!--eslint-skip-->
+
+```svelte
+<!-- ✗ BAD -->
+<script>
+  /* eslint svelte/no-add-event-listener: "error" */
+  window.addEventListener('resize', handler);
 </script>
 ```
 
diff --git a/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts b/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts
index fb478ce72..95e553c62 100644
--- a/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts
+++ b/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts
@@ -30,7 +30,7 @@ export default createRule('no-add-event-listener', {
 				const { callee, arguments: args } = node;
 				let target: string | null = null;
 
-				if (args.length !== 2) {
+				if (args.length < 2 || args.length > 3) {
 					return;
 				}
 
diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-errors.yaml b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-errors.yaml
index 7ae3e6dc1..0318160dc 100644
--- a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-errors.yaml
+++ b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-errors.yaml
@@ -33,6 +33,9 @@
         	window.addEventListener    ('message', handler);
         	// with a comment
         	window.addEventListener/* foo */('message', handler);
+
+        	// with options
+        	window.addEventListener('message', handler, { once: true });
         </script>
 
         <button onclick={onClick}>Hello</button>
@@ -71,6 +74,9 @@
         	window.addEventListener    ('message', handler);
         	// with a comment
         	window.addEventListener/* foo */('message', handler);
+
+        	// with options
+        	window.addEventListener('message', handler, { once: true });
         </script>
 
         <button onclick={onClick}>Hello</button>
@@ -109,6 +115,9 @@
         	window.addEventListener    ('message', handler);
         	// with a comment
         	window.addEventListener/* foo */('message', handler);
+
+        	// with options
+        	window.addEventListener('message', handler, { once: true });
         </script>
 
         <button onclick={onClick}>Hello</button>
@@ -147,6 +156,9 @@
         	window.addEventListener    ('message', handler);
         	// with a comment
         	window.addEventListener/* foo */('message', handler);
+
+        	// with options
+        	window.addEventListener('message', handler, { once: true });
         </script>
 
         <button onclick={onClick}>Hello</button>
@@ -185,6 +197,9 @@
         	window.addEventListener    ('message', handler);
         	// with a comment
         	window.addEventListener/* foo */('message', handler);
+
+        	// with options
+        	window.addEventListener('message', handler, { once: true });
         </script>
 
         <button onclick={onClick}>Hello</button>
@@ -223,6 +238,9 @@
         	on    (window, 'message', handler);
         	// with a comment
         	window.addEventListener/* foo */('message', handler);
+
+        	// with options
+        	window.addEventListener('message', handler, { once: true });
         </script>
 
         <button onclick={onClick}>Hello</button>
@@ -261,6 +279,50 @@
         	window.addEventListener    ('message', handler);
         	// with a comment
         	on/* foo */(window, 'message', handler);
+
+        	// with options
+        	window.addEventListener('message', handler, { once: true });
+        </script>
+
+        <button onclick={onClick}>Hello</button>
+- message: Do not use `addEventListener`. Use the `on` function from
+    `svelte/events` instead.
+  line: 31
+  column: 2
+  suggestions:
+    - desc: Use `on` from `svelte/events` instead
+      output: |
+        <script>
+        	const handler = (ev) => {
+        		console.log(ev);
+        	};
+
+        	function onClick(event) {
+        		const target = event.currentTarget;
+
+        		const deepObj = {
+        			deep: {
+        				obj: {
+        					target
+        				}
+        			}
+        		};
+
+        		target.addEventListener('focus', handler);
+        		deepObj.deep.obj.target.addEventListener('focus', handler);
+        	}
+
+        	addEventListener('message', handler);
+        	window.addEventListener('message', handler);
+        	document.addEventListener('visibilitychange', handler);
+
+        	// with a load of whitespace
+        	window.addEventListener    ('message', handler);
+        	// with a comment
+        	window.addEventListener/* foo */('message', handler);
+
+        	// with options
+        	on(window, 'message', handler, { once: true });
         </script>
 
         <button onclick={onClick}>Hello</button>
diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-input.svelte b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-input.svelte
index d51aeca93..790e022f7 100644
--- a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-input.svelte
+++ b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-input.svelte
@@ -26,6 +26,9 @@
 	window.addEventListener    ('message', handler);
 	// with a comment
 	window.addEventListener/* foo */('message', handler);
+
+	// with options
+	window.addEventListener('message', handler, { once: true });
 </script>
 
 <button onclick={onClick}>Hello</button>
diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/typescript01-errors.yaml b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/typescript01-errors.yaml
new file mode 100644
index 000000000..b1c8fc473
--- /dev/null
+++ b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/typescript01-errors.yaml
@@ -0,0 +1,17 @@
+- message: Do not use `addEventListener`. Use the `on` function from
+    `svelte/events` instead.
+  line: 6
+  column: 2
+  suggestions:
+    - desc: Use `on` from `svelte/events` instead
+      output: |
+        <script lang="ts">
+        	const handler = (ev: Event) => {
+        		console.log(ev);
+        	};
+
+        	on(window as any, 'message', handler);
+        	(window.addEventListener as any)('message', handler);
+        </script>
+
+        <div>Hello</div>
diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/typescript01-input.svelte b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/typescript01-input.svelte
new file mode 100644
index 000000000..180366a12
--- /dev/null
+++ b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/typescript01-input.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	const handler = (ev: Event) => {
+		console.log(ev);
+	};
+
+	(window as any).addEventListener('message', handler);
+	(window.addEventListener as any)('message', handler);
+</script>
+
+<div>Hello</div>

From 0090a276465f60c4e5bb922bf3c872ba5b573a42 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Thu, 24 Apr 2025 15:25:35 +0100
Subject: [PATCH 3/8] docs: update wording of rule details

Co-authored-by: Yuichiro Yamashita <xydybaseball@gmail.com>
---
 docs/rules/no-add-event-listener.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/rules/no-add-event-listener.md b/docs/rules/no-add-event-listener.md
index 2a81c9aff..dc38dbe8c 100644
--- a/docs/rules/no-add-event-listener.md
+++ b/docs/rules/no-add-event-listener.md
@@ -14,7 +14,7 @@ description: 'Warns against the use of `addEventListener`'
 
 ## :book: Rule Details
 
-This rule reports usages of `addEventListener`:
+Svelte relies on event delegation for performance and predictable handler order. Calling `addEventListener` inside a component skips this mechanism. This rule reports any call to `addEventListener` suggests converting to the `on()` helper from `svelte/events`.
 
 <!--eslint-skip-->
 

From 9693dd089303e4d772c477d752747cb44c80d717 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Fri, 25 Apr 2025 08:56:45 +0100
Subject: [PATCH 4/8] docs: add further reading

---
 docs/rules/no-add-event-listener.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/docs/rules/no-add-event-listener.md b/docs/rules/no-add-event-listener.md
index dc38dbe8c..aa4869ebf 100644
--- a/docs/rules/no-add-event-listener.md
+++ b/docs/rules/no-add-event-listener.md
@@ -36,6 +36,14 @@ Svelte relies on event delegation for performance and predictable handler order.
 </script>
 ```
 
+## :books: Further reading
+
+- [svelte - event delegation]
+- [svelte/events `on` documentation]
+
+[svelte - event delegation]: https://svelte.dev/docs/svelte/basic-markup#Events-Event-delegation
+[svelte/events `on` documentation]: https://svelte.dev/docs/svelte/svelte-events#on
+
 ## :mag: Implementation
 
 - [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts)

From ad440fed420f58d402e9e51ce5183fd4ce5c6f9a Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Fri, 25 Apr 2025 08:58:37 +0100
Subject: [PATCH 5/8] chore: remove default

---
 .../eslint-plugin-svelte/src/rules/no-add-event-listener.ts    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts b/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts
index 95e553c62..0f0f675e5 100644
--- a/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts
+++ b/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts
@@ -8,8 +8,7 @@ export default createRule('no-add-event-listener', {
 		docs: {
 			description: 'Warns against the use of `addEventListener`',
 			category: 'Best Practices',
-			recommended: false,
-			default: 'warn'
+			recommended: false
 		},
 		hasSuggestions: true,
 		schema: [],

From 2f819ccdc66f4d68a4264818f59be4bcb025f51e Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Fri, 25 Apr 2025 09:10:47 +0100
Subject: [PATCH 6/8] fix: support all call signatures

---
 .../src/rules/no-add-event-listener.ts        |  4 --
 .../invalid/test01-errors.yaml                | 68 +++++++++++++++++++
 .../invalid/test01-input.svelte               |  3 +
 3 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts b/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts
index 0f0f675e5..77040524c 100644
--- a/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts
+++ b/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts
@@ -29,10 +29,6 @@ export default createRule('no-add-event-listener', {
 				const { callee, arguments: args } = node;
 				let target: string | null = null;
 
-				if (args.length < 2 || args.length > 3) {
-					return;
-				}
-
 				if (
 					callee.type === 'MemberExpression' &&
 					callee.property.type === 'Identifier' &&
diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-errors.yaml b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-errors.yaml
index 0318160dc..db04267ef 100644
--- a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-errors.yaml
+++ b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-errors.yaml
@@ -36,6 +36,9 @@
 
         	// with options
         	window.addEventListener('message', handler, { once: true });
+
+        	// using spread
+        	window.addEventListener(...params);
         </script>
 
         <button onclick={onClick}>Hello</button>
@@ -77,6 +80,9 @@
 
         	// with options
         	window.addEventListener('message', handler, { once: true });
+
+        	// using spread
+        	window.addEventListener(...params);
         </script>
 
         <button onclick={onClick}>Hello</button>
@@ -118,6 +124,9 @@
 
         	// with options
         	window.addEventListener('message', handler, { once: true });
+
+        	// using spread
+        	window.addEventListener(...params);
         </script>
 
         <button onclick={onClick}>Hello</button>
@@ -159,6 +168,9 @@
 
         	// with options
         	window.addEventListener('message', handler, { once: true });
+
+        	// using spread
+        	window.addEventListener(...params);
         </script>
 
         <button onclick={onClick}>Hello</button>
@@ -200,6 +212,9 @@
 
         	// with options
         	window.addEventListener('message', handler, { once: true });
+
+        	// using spread
+        	window.addEventListener(...params);
         </script>
 
         <button onclick={onClick}>Hello</button>
@@ -241,6 +256,9 @@
 
         	// with options
         	window.addEventListener('message', handler, { once: true });
+
+        	// using spread
+        	window.addEventListener(...params);
         </script>
 
         <button onclick={onClick}>Hello</button>
@@ -282,6 +300,9 @@
 
         	// with options
         	window.addEventListener('message', handler, { once: true });
+
+        	// using spread
+        	window.addEventListener(...params);
         </script>
 
         <button onclick={onClick}>Hello</button>
@@ -323,6 +344,53 @@
 
         	// with options
         	on(window, 'message', handler, { once: true });
+
+        	// using spread
+        	window.addEventListener(...params);
+        </script>
+
+        <button onclick={onClick}>Hello</button>
+- message: Do not use `addEventListener`. Use the `on` function from
+    `svelte/events` instead.
+  line: 34
+  column: 2
+  suggestions:
+    - desc: Use `on` from `svelte/events` instead
+      output: |
+        <script>
+        	const handler = (ev) => {
+        		console.log(ev);
+        	};
+
+        	function onClick(event) {
+        		const target = event.currentTarget;
+
+        		const deepObj = {
+        			deep: {
+        				obj: {
+        					target
+        				}
+        			}
+        		};
+
+        		target.addEventListener('focus', handler);
+        		deepObj.deep.obj.target.addEventListener('focus', handler);
+        	}
+
+        	addEventListener('message', handler);
+        	window.addEventListener('message', handler);
+        	document.addEventListener('visibilitychange', handler);
+
+        	// with a load of whitespace
+        	window.addEventListener    ('message', handler);
+        	// with a comment
+        	window.addEventListener/* foo */('message', handler);
+
+        	// with options
+        	window.addEventListener('message', handler, { once: true });
+
+        	// using spread
+        	on(window, ...params);
         </script>
 
         <button onclick={onClick}>Hello</button>
diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-input.svelte b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-input.svelte
index 790e022f7..5f8a27c6c 100644
--- a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-input.svelte
+++ b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-input.svelte
@@ -29,6 +29,9 @@
 
 	// with options
 	window.addEventListener('message', handler, { once: true });
+
+	// using spread
+	window.addEventListener(...params);
 </script>
 
 <button onclick={onClick}>Hello</button>

From 9faaf7484200f1f200ff51e1f7d466dab338b765 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Fri, 25 Apr 2025 09:18:31 +0100
Subject: [PATCH 7/8] chore: add changeset

---
 .changeset/sad-points-strive.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/sad-points-strive.md

diff --git a/.changeset/sad-points-strive.md b/.changeset/sad-points-strive.md
new file mode 100644
index 000000000..2b53faf8b
--- /dev/null
+++ b/.changeset/sad-points-strive.md
@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': minor
+---
+
+Added `no-add-event-listener` rule to disallow usages of `addEventListener`

From 7efc7309bd64dea069599f5df0adbdb1ced69984 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Wed, 30 Apr 2025 10:53:10 +0100
Subject: [PATCH 8/8] fix: remove unused variable

---
 .../eslint-plugin-svelte/src/rules/no-add-event-listener.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts b/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts
index 77040524c..9ba558393 100644
--- a/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts
+++ b/packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts
@@ -26,7 +26,7 @@ export default createRule('no-add-event-listener', {
 	create(context) {
 		return {
 			CallExpression(node: TSESTree.CallExpression) {
-				const { callee, arguments: args } = node;
+				const { callee } = node;
 				let target: string | null = null;
 
 				if (