面试题：Svelte中Action如何绑定到DOM元素

在Svelte中绑定自定义Action到DOM元素：
- 在Svelte中，可以通过在元素标签上使用use:actionName的语法将自定义Action绑定到特定的DOM元素。其中actionName是你定义的Action函数。
实现点击元素后改变其背景颜色的Action示例：
```
<script>
    function changeBgColor(node) {
        const handleClick = () => {
            node.style.backgroundColor = 'blue';
        };
        node.addEventListener('click', handleClick);
        return {
            destroy() {
                node.removeEventListener('click', handleClick);
            }
        };
    }
</script>

<div use:changeBgColor>点击我改变背景颜色</div>
```
- 在上述代码中：
  - 首先定义了一个changeBgColor函数，它接受一个node参数，这个node就是绑定该Action的DOM元素。
  - 在函数内部，定义了一个handleClick函数，当元素被点击时，将其背景颜色设置为蓝色。
  - 然后使用addEventListener给该DOM元素添加点击事件监听器。
  - 最后返回一个对象，对象中有一个destroy函数，在Svelte组件销毁时，会调用这个destroy函数，在这里用于移除点击事件监听器，避免内存泄漏。
  - 在<div>元素上使用use:changeBgColor将这个Action绑定到该<div>元素上。当点击<div>时，背景颜色会变为蓝色。

星途面试题库