如何正确从窗口对象中删除事件侦听器？

Question

CustomElement.svelte

<svelte:options tag="custom-element" />

<script>
  import { onMount, onDestroy } from "svelte";

  onMount(() => {
    window.addEventListener("scroll", funcRef);
  });

  onDestroy(() => {
    window.removeEventListener("scroll", funcRef);
  });

  const funcRef = (event) => {
    doWhatever();
  }
</script>

实际上，当自定义元素从文档中删除时，应该删除事件处理程序，但事实并非如此。我缺少什么？

Answer 1

您提供的代码将正常工作，并且当组件被销毁时它会自动删除事件侦听器，但这里有一个更好的版本

<svelte:options tag="custom-element" />

<script>
  import { onMount} from "svelte";

  onMount(() => {
    const funcRef = (event) => {
      doWhatever();
    }
    window.addEventListener("scroll", funcRef);

    return ()=>{
      // this function is called when the component is destroyed
      window.removeEventListener("scroll", funcRef);
    }
  });
</script>

Answer 2

从文档中删除与被销毁不同。该组件的代码应该按预期工作。

如果您使用客户端 API 或该组件位于 Svelte 逻辑之外（即未由另一个 Svelte 组件添加/删除，例如通过{#if}），则必须确保实际调用$destroy.