Use DOM events and event modifiers in Svelte 3

Tomasz Łakomy
InstructorTomasz Łakomy
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

The whole magic of webapps is that users can interact with our code via various DOM events and Svelte is no exception in that regard.

In this quick lesson we're going to learn how to use DOM events in Svelte 3 as well as how to use event modifiers to alter DOM event behaviour (such as once and preventDefault)

Instructor: [0:00] We would like to build a simple app that whenever I type a name in this input field, after I click the button, I am going to see an alert saying Hello Name.

[0:08] In order to do that, attach input handlers to both input and the button. What we're going to do right now, I am going to do on:change, that is going to be equal to handleInput function. I am going to do something similar to the button, but I am going to use the on:click event and I am going to call on the handleClick function.

[0:24] Let me create a variable first on the name. Inside those handleInput, I am going to use the event in order to override the name value. I am going to do name equals event.target.value.

[0:35] In this handle click function, we're going to do alert("Hello " + name). Now we have the desired effect. If I type in Mike and click on the button, I am going to see an alert, Hello Mike.

[0:45] In Svelte, DOM events have modifiers that can alter their behavior. For instance, we would like to be able to only introduce ourselves once. To do that, we can pass in an once modifier to this on:click handler.

[0:57] Right now, if I type in another name, such as John and click on the button, I am going to be able to introduce myself. This can happen only once. I am no longer able to introduce myself because this event handler is going to trigger only once. We can also do other things such as preventDefault and we can also change those modifiers.

[1:15] If I did preventDefault and once, this event default behavior is going to be prevented and this event is going to be trigger only once.

egghead
egghead
~ 32 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today