Svelte - Events

---

---

Events in Svelte are essential for creating interactive applications. Svelte makes it easy to manage these events so you can react to user actions like clicking buttons or pressing keys.

What are Events in Svelte?

Events are actions or occurrences of something in the web application. These events occur when a user performs some action in the web application such as clicking buttons, scrolling and resizing windows, etc. In svelte, events allow developers to create interactive web applications by responding to user interactions such as clicks, mouse movements, and keyboard inputs.

Dom Events

DOM events are triggered by user interactions or changes in the Document Object Model (DOM). These events can be handled using Svelte's built-in event handling system.

Syntax

In Svelte, you use the on: directive to add event listeners to HTML elements. The syntax is as follows:

<element on:eventname={handlerFunction} />

Inline Event Handlers

Svelte allows the use of inline event handlers directly within the markup. This makes it simple to create components without needing to define separate functions in the script block for simple actions.

Syntax

The syntax for using an inline event handler is as follows:

<element on:eventName={() => { /* event handling logic */ }} />

Event Capturing

In web development, events have two main phases: capturing and bubbling. In the capturing phase, an event moves from the root of the DOM to the target element. Typically, event handlers run during the bubbling phase, but sometimes you may want them to run during the capturing phase. This is useful for intercepting events before they reach a specific target.

Syntax

To set up an event listener for capturing in Svelte, you use the following syntax:

<button on:click|capture={yourHandler}>Click Me</button>

Component Events

We can handle events in components by sending functions (event handlers) to child components just like you pass other properties (props). This allows the child component to call these functions when certain events occur.

Spreading Events

In Svelte, we can easily manage event handlers by spreading them from parent components to child components. This makes the code simpler, helps reuse components, and keeps the event handling clear.

Example

In this example, we'll create a simple counter that increments when a button is clicked using events in svelte.

<!--App.svelte-->
<script>
    let count = 0;

    function increment() {
    count += 1;
    }
</script>

<button on:click={increment}>Increment</button>
<p>Count: {count}</p>

Output