Einführung Actions

Wofür Actions?

Komponenten haben ein eigenes Mounting-Lifecycle (onMount, onDestroy, $effect). Aber manchmal willst du Verhalten an einzelne DOM-Elemente hängen — wiederverwendbar, ohne ständig dieselben Listener-Setups zu kopieren.

Drei typische Beispiele:

• Tooltip: Beim Hover soll ein kleines Popup erscheinen — gleicher Code an dutzenden Buttons.
• Klick außerhalb: Ein Dropdown soll sich schließen, wenn der Nutzer woanders klickt.
• Library-Integration: Eine Datepicker- oder Editor-Library braucht ein Element, an das sie sich hängt.

Statt jedes Mal bind:this, onMount, Listener-Setup, onDestroy zu schreiben, packst du das in eine Action — und benutzt sie überall mit einem einzigen use:.

Die einfachste Action

<script>
    function logMount(node) {
        console.log('Element gemountet:', node);
    }
</script>

<div use:logMount>Hallo</div>

Was hier passiert:

• logMount ist eine normale Funktion, die als erstes Argument den DOM-Knoten bekommt.
• use:logMount an einem Element ruft die Funktion auf, sobald dieses Element im DOM ist.
• Du musst nichts importieren, kein Lifecycle-Hook, kein bind:this. Action und Element sind zusammengeführt.

Cleanup mit $effect

Realistischere Actions wollen beim Mount etwas einrichten und beim Unmount wieder aufräumen — typisch Listener oder Observer. Dafür nutzt man innerhalb der Action $effect:

<script>
    function logClicks(node) {
        $effect(() => {
            function handle() {
                console.log('Klick auf', node.tagName);
            }
            node.addEventListener('click', handle);

            return () => node.removeEventListener('click', handle);
        });
    }
</script>

<button use:logClicks>Klick mich</button>

Schritt für Schritt:

1. logClicks wird beim Mount aufgerufen, mit dem <button>-Knoten.
2. $effect registriert den Listener.
3. Wenn der Button später aus dem DOM verschwindet, läuft die Cleanup-Funktion und entfernt den Listener wieder.

Mit Parameter

Actions können Daten von außen entgegennehmen — über das gleiche use:-Konstrukt:

<script>
    function autoFocus(node, options = { delay: 0 }) {
        $effect(() => {
            const id = setTimeout(() => node.focus(), options.delay);
            return () => clearTimeout(id);
        });
    }
</script>

<input use:autoFocus={{ delay: 200 }} />

{ delay: 200 } wird als zweites Argument an autoFocus durchgereicht. Wie auf Parameter-Updates reagiert wird (also wenn sich der Wert während der Lebenszeit ändert), zeigt der Artikel Action-Parameter & Updates.

Mehrere Actions am selben Element

Du kannst beliebig viele Actions am gleichen Element kombinieren — use: lässt sich mehrfach setzen:

<button use:autoFocus={{ delay: 100 }} use:logClicks use:tooltip={{ text: 'Speichern' }}>
    Speichern
</button>

Jede Action läuft unabhängig, jede räumt selbst hinter sich auf. Genau das macht sie wiederverwendbar und kombinierbar.

Wichtige Eigenschaften

Typische Anwendungsfälle

• Tooltips — bei Hover ein Popup einblenden.
• Klick-außerhalb-Erkennung — Dropdowns, Modals.
• Focus-Management — Focus-Trap, Auto-Focus, Tab-Order.
• Drag-and-Drop — Mouse-/Pointer-Listener am Drag-Handle.
• Lazy-Loading — IntersectionObserver am Element.
• Bibliotheks-Integration — Datepicker, Tagify, Quill, Mapbox usw. brauchen ein DOM-Element zum Initialisieren.
• Long-press / Swipe — Geste-Erkennung.
• Auto-Resize von Textareas — Content-fit per scrollHeight.

Vertieft im Artikel Praxis-Actions.

Action vs. Komponente — wann was?

Beide kapseln wiederverwendbares Verhalten, aber mit unterschiedlichem Fokus:

Faustregel: Wenn du nur Verhalten und keine Struktur lieferst, ist eine Action die richtige Wahl.

Weiterführende Ressourcen

Externe Quellen

• use: – svelte.dev

Verwandte Artikel

• Custom Actions schreiben
• Action-Parameter & Updates
• Praxis-Actions