Use EventListener with simplicity. Supports Window, Element and Document and custom events with almost the same parameters as the native addEventListener options. See examples below.


Check console for logs.


<script lang="ts">
import { eventListenerStore } from '$lib';
import { onMount } from 'svelte';

let buttonRef: HTMLButtonElement;
let documentRef: Document;

const onScroll = (event: Event) => {
  console.log("window scrolled!", event);

const onClick = (event: Event) => {
  console.log("button clicked!", event);

const onVisibilityChange = (event: Event) => {
  console.log("doc visibility changed!", {
    isVisible: !document.hidden,

onMount(() => {
  // example with window based event
  eventListenerStore('scroll', onScroll)

  // example with document based event
  eventListenerStore('visibilitychange', onVisibilityChange, documentRef)

  eventListenerStore('click', onClick, buttonRef)

<button bind:this={buttonRef}>Click me</button>