[Svelte 3] Use DOM events and event modifiers in Svelte 3
in and use dom Event Events
2023-09-14 09:00:48 时间
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>
相关文章
- [Unit testing + Jest] Use jest-in-case to Reduce Duplication and Improve Test Titles
- [Bash] Chain Commands with Pipes and Redirect Output in Bash
- [XState] Use Internal Transitions in XState to Avoid State Exit and Re-Entry
- [Svelte 3] Use await block to wait for a promise and handle loading state in Svelte 3
- [Angular] Debug Angular apps in production without revealing source maps
- [PWA] Cache JSON Data in a React PWA with Workbox, and Display it while Offline
- [Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript
- [Preact] Use State and Props in the Component Render Function
- [Postgres] Update and Delete records in Postgres
- [Ramda] Getter and Setter in Ramda & lens
- [Node.js] Using npm link to use node modules that are "in progress"
- 解决TabError: inconsistent use of tabs and spaces in indentation
- [Typescript + React] Tip: Use generics in React to make dynamic and flexible components
- [Java Spring] Built-in page and sorting
- [XState] Use Internal Transitions in XState to Avoid State Exit and Re-Entry
- [Cypress] Find and Test Focused Input with Chrome’s DevTools in Cypress
- [TypeScript] Restrict null and undefined via Non-Nullable-Types in TypeScript
- [Nuxt] Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates
- [Preact] Use State and Props in the Component Render Function
- [Angular 2] Generate and Render Angular 2 Template Elements in a Component
- DEFAULT keyword in ABAP and Optional Class in Java
- primary key in ABAP and Hybris
- when and where is gt_cache_in_memory filled
- How org unit id and type is determined in Genil
- 成功解决TabError: inconsistent use of tabs and spaces in indentation
- Ruby: Count unique elements and their occurences in an array
- How JavaScript works in browser and node?
- 学习经验分享之二:YOLOX: Exceeding YOLO Series in 2021