# svelte/no-add-event-listener

Warns against the use of addEventListener

• 💡 Some problems reported by this rule are manually fixable by editor suggestions.

# 📖 Rule Details

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.

<!-- ✓ GOOD -->
<script>
  /* eslint svelte/no-add-event-listener: "error" */
  on(window, 'resize', handler);
</script>

<!-- ✗ BAD -->
<script>
  /* eslint svelte/no-add-event-listener: "error" */
  
Do not use `addEventListener`. Use the `on` function from `svelte/events` instead. (svelte/no-add-event-listener)window.addEventListener('resize', handler);
</script>

# 📚 Further reading

• svelte - event delegation
• svelte/events on documentation

# 🚀 Version

This rule was introduced in eslint-plugin-svelte v3.6.0

# 🔍 Implementation

• Rule source
• Test source