javascript / intermediate
Snippet
Wiederverwendbares Elementverhalten mit Actions
Actions sind Funktionen, die beim Erstellen eines Elements aufgerufen werden. Sie ermöglichen es, benutzerdefinierte Logik an DOM-Knoten zu binden, wie etwa das Erkennen von Klicks außerhalb eines Elements. Dies ist ideal, um Drittanbieter-Bibliotheken zu integrieren oder komplexe Interaktionen zu handhaben, ohne die Komponentenlogik zu überladen.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export function clickOutside(node) {const handleClick = (event) => {if (!node.contains(event.target)) {node.dispatchEvent(new CustomEvent('outclick'));}};document.addEventListener('click', handleClick);return {destroy() {document.removeEventListener('click', handleClick);}};}
svelte
Erklärung
1
export function clickOutside(node) {
Die Funktion erhält die DOM-Knoteninstanz als erstes Argument.
2
node.dispatchEvent(new CustomEvent('outclick'));
Löst ein benutzerdefiniertes DOM-Ereignis aus, das in Svelte mit on:outclick abgefangen werden kann.
3
return { destroy() { ... } };
Das zurückgegebene Objekt kann eine destroy-Methode enthalten, um Listener beim Entfernen des Elements zu bereinigen.