Event Handling in Svelte

<script>
  let clickCount = 0;
  let message = &#039;';

  function handleClick() {
    clickCount++;
  }

  function handleInput(event) {
    message = event.target.value;
  }
</script>

<!-- Click event -->
<button on:click={handleClick}>Clicked {clickCount} times</button>

<!-- Inline click with arrow function -->
<button on:click={() => clickCount = 0}>Reset</button>

<!-- Input event -->
<input on:input={handleInput} placeholder="Type something..." />
<p>You typed: {message}</p>

<!-- Prevent default form submission (no page reload) -->
<form on:submit|preventDefault={handleSubmit}>

<!-- Stop event from bubbling up to parent elements -->
<div on:click|stopPropagation={() => console.log(&#039;div clicked')}>

<!-- Only fire once, then remove the listener -->
<button on:click|once={handleOneTimeSetup}>Initialize</button>

<!-- Combine multiple modifiers -->
<form on:submit|preventDefault|stopPropagation={handleSubmit}>

<!-- Passive — improves scroll performance (cannot prevent default) -->
<div on:scroll|passive={handleScroll}>

<script>
  function handleKeydown(event) {
    if (event.key === &#039;Enter') {
      console.log(&#039;Enter pressed!');
    }
    if (event.key === &#039;Escape') {
      closeModal();
    }
  }

  function handleMouseMove(event) {
    console.log(`Mouse at: ${event.clientX}, ${event.clientY}`);
  }
</script>

<input on:keydown={handleKeydown} placeholder="Press Enter or Escape" />
<div on:mousemove={handleMouseMove} class="canvas">Move mouse here</div>

<!-- ConfirmDialog.svelte -->
<script>
  import { createEventDispatcher } from &#039;svelte';

  export let message = &#039;Are you sure?';

  const dispatch = createEventDispatcher();

  function confirm() {
    dispatch(&#039;confirm', { confirmed: true, timestamp: Date.now() });
  }

  function cancel() {
    dispatch(&#039;cancel');
  }
</script>

<div class="dialog">
  <p>{message}</p>
  <button on:click={cancel}>Cancel</button>
  <button class="danger" on:click={confirm}>Confirm</button>
</div>

<!-- Parent component using ConfirmDialog -->
<script>
  import ConfirmDialog from &#039;./ConfirmDialog.svelte';
  let showDialog = false;
  let lastAction = &#039;';

  function handleConfirm(event) {
    lastAction = `Confirmed at ${new Date(event.detail.timestamp).toLocaleTimeString()}`;
    showDialog = false;
  }
</script>

{#if showDialog}
  <ConfirmDialog
    message="Delete this item?"
    on:confirm={handleConfirm}
    on:cancel={() => showDialog = false}
  />
{/if}

<button on:click={() => showDialog = true}>Delete Item</button>
<p>{lastAction}</p>

<!-- TodoApp.svelte -->
<script>
  let newTodoText = &#039;';
  let todos = [
    { id: 1, text: &#039;Learn Svelte reactivity', done: true },
    { id: 2, text: &#039;Build a todo app', done: false },
    { id: 3, text: &#039;Deploy to production', done: false }
  ];
  let nextId = 4;
  let filter = &#039;all'; // all, active, done

  $: filteredTodos = filter === &#039;all' ? todos :
    filter === &#039;active' ? todos.filter(t => !t.done) :
    todos.filter(t => t.done);

  $: remainingCount = todos.filter(t => !t.done).length;

  function addTodo() {
    if (newTodoText.trim()) {
      todos = [...todos, { id: nextId++, text: newTodoText.trim(), done: false }];
      newTodoText = &#039;';
    }
  }

  function handleKeydown(e) {
    if (e.key === &#039;Enter') addTodo();
  }

  function toggle(id) {
    todos = todos.map(t => t.id === id ? { ...t, done: !t.done } : t);
  }

  function remove(id) {
    todos = todos.filter(t => t.id !== id);
  }

  function clearCompleted() {
    todos = todos.filter(t => !t.done);
  }
</script>

<div class="app">
  <h1>✅ Todo App</h1>

  <div class="input-row">
    <input
      bind:value={newTodoText}
      on:keydown={handleKeydown}
      placeholder="What needs to be done?"
    />
    <button on:click={addTodo}>Add</button>
  </div>

  <div class="filters">
    {#each ['all', 'active', 'done'] as f}
      <button class:selected={filter === f} on:click={() => filter = f}>
        {f.charAt(0).toUpperCase() + f.slice(1)}
      </button>
    {/each}
  </div>

  <ul>
    {#each filteredTodos as todo (todo.id)}
      <li class:done={todo.done}>
        <input type="checkbox" checked={todo.done} on:change={() => toggle(todo.id)} />
        <span>{todo.text}</span>
        <button on:click={() => remove(todo.id)}>✕</button>
      </li>
    {/each}
  </ul>

  <div class="footer">
    <span>{remainingCount} item{remainingCount !== 1 ? &#039;s' : ''} left</span>
    <button on:click={clearCompleted}>Clear completed</button>
  </div>
</div>