---
type: lesson
authors:
  - alex-patterson
cloudinary_convert: false
cover: 'https://media.codingcat.dev/image/upload/v1681939723/main-codingcatdev-photo/courses/svelte/basic-events.png'
excerpt: 'Svelte DOM events allow you to listen for and respond to user interactions with the DOM.'
published: published
slug: basic-events
start: April 17, 2023
stackblitz: 'https://stackblitz.com/github/CodingCatDev/svelte-course/tree/06-basic-events?embed=1&file=apps/svelte-site/src/routes/%2Bpage.svelte'
title: 'Learn Svelte: The Ultimate Guide - Basic Events'
weight: 6
youtube: https://youtu.be/pEf3V5fpCJc
---

## DOM Events in Svelte

Svelte is a modern JavaScript framework that is quickly gaining popularity among web developers. One of the things that makes Svelte so powerful is its event handling system. Svelte's event handling system is simple, efficient, and easy to learn.

In this blog post, we will discuss DOM events in Svelte. We will learn how to listen for DOM events, how to handle DOM events, and how to prevent default actions.

## What are DOM Events?

DOM events are events that are generated by the DOM. DOM events are triggered by user interaction, such as mouse clicks, key presses, and scroll events. DOM events can also be triggered by changes to the DOM, such as when an element is added or removed from the DOM.

## How to Listen for DOM Events

Svelte provides a number of ways to listen for DOM events. The most common way to listen for DOM events is to use the `on:eventname` directive. The `on:eventname` directive takes a function as its value. The function will be called whenever the event is triggered.

For example, the following code listens for the `click` event on a button:

```svelte
<button
	on:click={() => {
		// do something when the button is clicked
	}}
>
	Click Me!
</button>
```

## How to Handle DOM Events

The function that is passed to the `on:eventname` directive can be used to handle the event. The function can be used to change the DOM, update the state of the component, or call a function.

For example, the following code changes the text of a paragraph when the button is clicked:

```svelte
<p>This is a paragraph.</p>
<button
	on:click={() => {
		// change the text of the paragraph
		paragraph.textContent = 'This is a new paragraph.';
	}}
>
	Click Me!
</button>
```

## How to Prevent Default Actions

The `on:eventname` directive also takes a modifier called `preventDefault`. The `preventDefault` modifier can be used to prevent the default action of the event from being triggered.

For example, the following code prevents the default action of the `click` event from being triggered:

```svelte
<button
	on:click={() => {
		// do something when the button is clicked
	}}
	preventDefault
>
	Click Me!
</button>
```

## Conclusion

DOM events are a powerful way to interact with the user and respond to changes in the DOM. Svelte's event handling system is simple, efficient, and easy to learn. By understanding how to use DOM events, we can build web applications that are both interactive and responsive.
