Events and Event Handling

Let's continue with the Counter.svelte component that we just worked with, removing the setInterval call from the code. Modify the Counter.svelte to match the following.

<script>
  let count = $state({
    value: 0,
    note: "single digits",
  });
</script>

<p>Count: {count.value} ({count.note})</p>

The component has a reactive variable count that is initialized to an object with two properties: value and note. There is no functionality in the component that would change the value of count.

Event directives are used to handle events in elements -- they are added to elements similar to attributes. Event directives are prefixed with on:, followed by the event name, followed by the code that should be executed in the case of the specific event.

As an example, we can define a button that handles click events as follows. The button has an on:click event directive that calls a function incrementCount whenever the button is clicked. The button shows the text Increment.

<button on:click={incrementCount}>Increment</button>

Try adding the button to the Counter.svelte component, and see what happens.

<script>
  let count = $state({
    value: 0,
    note: "single digits",
  });
</script>

<p>Count: {count.value} ({count.note})</p>
<button on:click={incrementCount}>Increment</button>

When you add the button to the component, the application no longer works. The problem is that the button expects that a function incrementCount exists, but it has not been defined. Let's add the function to the component.

<script>
  let count = $state({
    value: 0,
    note: "single digits",
  });

  const incrementCount = () => {
    count.value++;
  }
</script>

<p>Count: {count.value} ({count.note})</p>
<button on:click={incrementCount}>Increment</button>

Now, the application works again. The application shows the count and the button. Pressing the button increments the count by one. In the following image, the button has been pressed eleven times.

As we can see from the above image, the note is still single digits. Let's modify the note to not single digits when the count reaches ten. Similar to before, we can do this by adding an if statement to the incrementCount function.

<script>
  let count = $state({
    value: 0,
    note: "single digits",
  });

  const incrementCount = () => {
    count.value++;

    if (count.value > 9) {
      count.note = "not single digits";
    }
  };
</script>

<p>Count: {count.value} ({count.note})</p>
<button on:click={incrementCount}>Increment</button>

Now, the note changes when the count reaches ten. The image below shows the page after the button has been pressed ten times -- now the note has also been updated.