svelte/action 是给html标签自定义事件？

Svelte 的 action 是一种强大的机制，用于向 HTML 元素添加自定义行为。action 不是事件，而是一个函数，可以在元素创建时、更新时和销毁时执行特定的逻辑。这使得你可以轻松地将特定的行为附加到 DOM 元素上，而无需在组件中编写复杂的逻辑。

基本用法

一个 action 是一个函数，它接收一个元素作为参数，并可以返回一个对象，该对象可以包含一个 update 函数和一个 destroy 函数。

创建一个简单的 action

// actions.js
export function focus(node) {
  // 立即使元素获得焦点
  node.focus();

  return {
    // 当元素属性更新时调用
    update(newParams) {
      // 在这里处理更新逻辑
    },
    // 当元素被移除时调用
    destroy() {
      // 在这里清理任何副作用
    }
  };
}

在组件中使用 action

<script>
  import { focus } from './actions.js';
</script>

<input use:focus>

在这个例子中，focus action 会在元素创建时立即使输入框获得焦点。

更复杂的 action

你可以创建更复杂的 action，例如一个可以处理点击外部元素的 action。

创建 clickOutside action

// actions.js
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);
    }
  };
}

在组件中使用 clickOutside action

<script>
  import { clickOutside } from './actions.js';

  function handleOutclick() {
    alert('Clicked outside!');
  }
</script>

<div use:clickOutside on:outclick={handleOutclick}>
  Click outside of this box to trigger an alert.
</div>

在这个例子中，当用户点击元素外部时，会触发一个自定义事件 outclick，并调用 handleOutclick 函数。

总结

Svelte 的 action 提供了一种简洁而强大的方式来向 HTML 元素添加自定义行为。通过 action，你可以在元素创建、更新和销毁时执行特定的逻辑，从而实现更高级的功能。action 可以用于各种场景，例如自动聚焦、点击外部检测、拖放等，使你的组件更加灵活和强大。