Skip to content

Latest commit

 

History

History
25 lines (20 loc) · 1.41 KB

README.md

File metadata and controls

25 lines (20 loc) · 1.41 KB
title
Event modifiers

DOM event handlers can have modifiers that alter their behaviour. For example, a handler with a once modifier will only run a single time:

/// file: App.svelte
<button on:click+++|once+++={() => alert('clicked')}>
	Click me
</button>

The full list of modifiers:

  • preventDefault — calls event.preventDefault() before running the handler. Useful for client-side form handling, for example.
  • stopPropagation — calls event.stopPropagation(), preventing the event reaching the next element
  • passive — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
  • nonpassive — explicitly set passive: false
  • capture — fires the handler during the capture phase instead of the bubbling phase
  • once — remove the handler after the first time it runs
  • self — only trigger handler if event.target is the element itself
  • trusted — only trigger handler if event.isTrusted is true, meaning the event was triggered by a user action rather than because some JavaScript called element.dispatchEvent(...)

You can chain modifiers together, e.g. on:click|once|capture={...}.