event_directive_deprecated warning
Using `on:%name%` to listen to events is deprecated. Use the event attribute `on%name%` instead (e.g., `onclick` instead of `on:click`).
Svelte · Language · all subjects
event attributes
8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Event attribute syntax
To listen to DOM events, add attributes to the element that start with 'on' followed by the event name. For example, to listen to the click event, add the onclick attribute: <button onclick={() => console.log('clicked')}>click me</button>.
Event attributes are case sensitive
Event attributes are case sensitive. 'onclick' listens to the 'click' event, while 'onClick' listens to the 'Click' event, which is different. This ensures you can listen to custom events that have uppercase characters in them.
Event attribute ordering and timing
Event attributes always fire after events from bindings (e.g., oninput always fires after an update to bind:value).
Passive listeners for touch events
When using ontouchstart and ontouchmove event attributes, the handlers are passive for better performance. This greatly improves responsiveness by allowing the browser to scroll the document immediately, rather than waiting to see if the event handler calls event.preventDefault(). In rare cases where you need to prevent these event defaults, use the 'on' function from 'svelte/events' instead (for example inside an action).
Event delegation mechanism
Svelte uses event delegation to reduce memory footprint and increase performance. For certain events, a single event listener at the application root takes responsibility for running handlers on the event's path.
Event delegation gotchas
When manually dispatching an event with a delegated listener, set the { bubbles: true } option or it won't reach the application root. When using addEventListener directly, avoid calling stopPropagation or the event won't reach the application root and handlers won't be invoked. Handlers added manually inside the application root will run before handlers added declaratively deeper in the DOM in both capturing and bubbling phases. It is better to use the 'on' function imported from 'svelte/events' rather than addEventListener, as it will ensure that order is preserved and stopPropagation is handled correctly.
Delegated event handlers list
The following event handlers are delegated: beforeinput, click, change, dblclick, contextmenu, focusin, focusout, input, keydown, keyup, mousedown, mousemove, mouseout, mouseover, mouseup, pointerdown, pointermove, pointerout, pointerover, pointerup, touchend, touchmove, touchstart.