面试题：Svelte中Action实现自定义事件处理的基础用法

在Svelte中，Action是一种可以附加到DOM元素上的函数，用来增强元素的行为。要实现一个简单的自定义点击事件处理并在点击时在控制台输出自定义文本信息，可以按以下步骤：

创建一个Action函数。
在组件中使用这个Action。

以下是代码示例：

<script>
    // 创建一个Action函数
    function customClickAction(node, text) {
        const handleClick = () => {
            console.log(text);
        };

        node.addEventListener('click', handleClick);

        // 返回一个销毁函数，用于移除事件监听器
        return {
            destroy() {
                node.removeEventListener('click', handleClick);
            }
        };
    }
</script>

<button use:customClickAction={'这是自定义文本'}>点击我</button>

在上述代码中：

customClickAction是自定义的Action函数，它接受两个参数：node（即应用该Action的DOM元素）和text（要在控制台输出的自定义文本）。
在函数内部，定义了一个handleClick函数，当元素被点击时，会在控制台输出text。
使用addEventListener将handleClick函数绑定到click事件上。
返回一个包含destroy函数的对象，在组件销毁时，destroy函数会被调用，用于移除click事件的监听器，避免内存泄漏。
在button元素上，通过use:customClickAction={'这是自定义文本'}使用了这个Action，并传入了要输出的自定义文本。

星途面试题库

面试题：Svelte中Action实现自定义事件处理的基础用法

知识考点

面试题答案