Reusing DOM event logic with custom events

Before we start talking directly about actions, let’s look at an example of using the mousedown and mouseup events to create a long-press behavior. We shall see how this simple example will lead us on to Svelte actions:

<script>
  let timer;
  function handleMousedown() {
    timer = setTimeout(() => {
      console.log('long press!');
    }, 2000);
  }
  function handleMouseup() {
    clearTimeout(timer);
  }
</script>
<button
  on:mousedown={handleMousedown}
  on:mouseup={handleMouseup}
/>

In the preceding example, we tried to implement a long-press behavior in a button. The idea is to press and hold the button for more than two seconds and then perform some action. As we detect it’s a long press, we print 'long press!' into...