What are Svelte event directives?

Svelte uses the on: directive to listen to DOM events. Basic: <button on:click={handleClick}>. Inline: <button on:click={() => count++}>. Modifiers change behavior: on:click|preventDefault={handler} calls event.preventDefault(). on:click|stopPropagation={handler} stops bubbling. on:click|once={handler} fires only once. on:click|self={handler} fires only if the element itself was clicked (not a child). Multiple modifiers: on:click|preventDefault|stopPropagation. Component events: child components dispatch events: import { createEventDispatcher } from 'svelte'; const dispatch = createEventDispatcher(); dispatch('message', { text: 'hello' });. Parent listens: <Child on:message={handleMessage} />. Event forwarding: <button on:click> (no handler) forwards the event to the parent.