[Svelte 3] Use DOM events and event modifiers in Svelte 3

2023年1月6日 154次阅读 来源: Zhentiw

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)

Doc: https://v2.svelte.dev/guide#event-handler-modifiers

 

<script>
    let name;
    const sayHello = () => alert('Hello ' + name);
    const handleInput = e => name = e.target.value;
</script>

<h1>
    Hello:
</h1>
<input type="text" on:change={handleInput} />
<button on:click|preventDefault|once={sayHello}>Say name</button>

 

    原文作者：Zhentiw
    原文地址: https://www.cnblogs.com/Answer1215/p/10902960.html
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞